[Solved] Suggestion HTML: Change various <div> to proper <select> for some forms

zeta

Hi,

There are various dropdowns that are created via "[font=Consolas,]class[/font][font=Consolas,]="[/font][font=Consolas,]select2-drop select2-display-none select2-drop-active[/font][font=Consolas,]" [/font] Such as the ones during checkout step one when you select pickup time, or the ones shown at the order edit page (admin/orders/edit?id=20943) status box.

When using mobile devices and clicking on these <div>, the keyboard pops up and makes the interface annoying to use.

I suggest changing them to regular <select> dropdown so then the mobile OS proper handling of select boxes show up which is better UX.

Thanks.

sampoyigi

This might be related.

https://github.com/select2/select2/issues/4425

Try @SgtOddball's solution.

Make changes to the header.php file

zeta

sampoyigi wrote This might be related. https://github.com/select2/select2/issues/4425 Try @SgtOddball's solution. Make changes to the header.php file

The version of Select2 that TastyIgniter is using is: Version: 3.5.1 Timestamp: Tue Jul 22 18:58:56 EDT 2014 The fix you provided was posted on 2016 so it does not fix the problem with v3.5.1.

I followed the issue (https://github.com/select2/select2/issues/1541) and found that this works:

<style>
.select2-focusser,
.select2-search,
.select2-search input {
    display: none !important;
}
</style>

I tried placing the code in an existing CSS file but for some reason, the keyboard still shows up in that scenario. I placed it in a new CSS file and imported via theme_config.php (viewer), and via header.php (admin).

Edit: I found out that the keyboard should be enabled for the menu edit page for adding menu options. So I also added the following if statement so that it would be enabled for that page in the admin side.

	if (strpos($_SERVER['REQUEST_URI'], 'admin/menus/edit') == false) { 
		$this->template->setStyleTag('css/select2fix.css', 'stylesheet-css', '17'); //ivanzeta
	}