Menu
I am using the script "core ui select" to style my forms on my website. Everything was working fine for desktop users, but since a while there is a lot of reports from users using mobiles. They say that they can't modify the option because it is greyed out.
So i did the test using a firefox plugin called "Default User Agent" and i switched my browser agent to iPhone. Then i realised that the whole form stopped working, but only for mobile users
Here's a test page if you want to see the problem live (you would have to change your user agent to reproduce the bug) : https://www.ni-dieu-ni-maitre.com/test_mobile.php
And here's the code of the page.
<script type="text/javascript" src="https://www.no-gods-no-masters.com/scripts/jquery-1.8.2.min.js"></script>
<link href="https://www.no-gods-no-masters.com/scripts/css/core-ui-select.css" media="screen" rel="stylesheet" type="text/css">
<link href="https://www.no-gods-no-masters.com/scripts/css/jquery.scrollpane.css" media="screen" rel="stylesheet" type="text/css">
<script>
$(document).ready(function(){
$('#impression').coreUISelect();
});
</script>
</head><body>
<select class="b-core-ui-select__dropdown" name="impression" id="impression">
<option>Printing on front</option>
<option>Printing on back</option>
</select>
<script src="https://www.no-gods-no-masters.com/scripts/js/jquery.core-ui-select.js"></script>
</body>
</html>
508
Mobile user interface or mobile UI is the way an app feels and looks while using the app. It’s a bridge between your users and the app itself. UI is one of the final phases of app development and an essential part of user experience. It’s all about creating an enjoyable and friendly experience for the user. It’s a key to the success of your app.
However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support our Open Source software development in the following ways: Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
Some mobile UI designs are so recognizable that they inspire other app developers with their simple ingenuity. We’ll show you two well-known examples of just how vital a good mobile UI design is. Inspire yourself with their design principles, a palette of colors… The original dating app, the one that started it all.
Use color to make UI buttons look actionable. A colorful button is a good button. Color, especially contrasting colors, attracts the user and encourages them to take action. Colors are also a part of your brand identity. Therefore, users will associate the color palette you choose to use in the user interface with your brand.
It is not a bug. When executing on a mobile device, the plugin (core-ui-select) explicitly skips the DOM manipulation code which is meant to show the dropdown.
To see this, you can set a break point in jquery.core-ui-select.js line number 176.
CoreUISelect.prototype.showDropdown = function() {
this.domSelect.focus();
this.settings.onOpen && this.settings.onOpen.apply(this, [this.domSelect, 'open']);
if($.browser.mobile) return this; //176: this skips the rest on mobile
if(!this.isSelectShow) {
this.isSelectShow = true;
this.select.addClass('open');
this.dropdown.addClass('show').removeClass('hide');
if(this.isJScrollPane) this.initJScrollPane();
this.scrollToCurrentDropdownItem(this.dropdownItem.eq(this.getCurrentIndexOfItem()));
this.updateDropdownPosition();
}
}
The evaluation on line 176: $.browser.mobile evaluates to true when tapped (I simulated a mobile device in Chrome) and the remainder code is thus skipped.
Fix: Removing the line shows the drop-down just fine.
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
