Given a simple select list.
<select>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
<option>Test 4</option>
</select>
Running Example: http://jsfiddle.net/gbdvn2ht/
Open Page in Safari (8.0.8 or earlier I presume, it works as expected in OSX 10.11)
Observe that clicking quickly over and over on the select list opens the select list and selects the first item.
Focus on another window (I used a terminal but it doesn't matter)
While focused on the other window click back into the Safari tab but make sure you click directly on the select and continue clicking quickly.
Observe that the select initial opens, closes, and then stops responding. A page refresh of the page is the only way to make it work again. Clicking on it no longer opens the select list.
Strange right?
Given the fact that the newest Safari doesn't present the problem I can assume it's a Safari bug. However, I still need to support this version of the browser. Any ideas on a workaround would be greatly appreciated.
I do not have access to that version of Safari, but have you tried using a jquery plugin to override the drop down ? I thought it would be worth a shot.
I've updated the jsfiddle for you to try.
http://jsfiddle.net/gbdvn2ht/1/
The plugin I tried was Select2 (https://select2.github.io/examples.html)
$("#select").select2({
minimumResultsForSearch: Infinity
});
Related
I have several users trying to submit a webform. But i'm getting reports that when they click on a select dropdown menu or start to scroll through the options it causing the browser to crash - Internet explorer has stopped responding. The user then refreshes the page to try again but then faced with the same issue.
This is only related to IE 11 and this happens randomly - sometimes the select option works and then they click on another select and it crashes again.
IE11 version: 11.648.17134.0
Windows 10
jquery-3.3.1.min.js
Please bear in mind some users will not have access rights to their browser settings.
Here a simple select menu:
<select name="test" id="test">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
I read that adding a resize option to the list to 0 or 1 might resolve this issue. So i added a jquery to modify them all onload:
$( document ).ready(function() {
setTimeout(
function()
{
$("select").attr("size", "1")
}, 10);
});
But this didn't help
When I try to open a drop-down, the window is too small for me to see any options. However, I know that the options do exist because they do appear when I use my arrow keys.
When I add size=10 to the select tag, like so:
<select size="10">
everything works fine. However this is not the interface I want.
What are the possibilities that could be causing this issue?
I have a code fragment similar to this:
<select class="abcd" id="aaaa" />
<option selected>yes</option>
<option>no</option>
</select>
Firefox shows Yes as a default option when page loads.
But, same is not true with Chrome, and Safari. The select box shows up with a blank box and I have to click on the box to reveal the options and see what's the default one (Yes was chosen when the box is dropped down).
Can you please me understand if I'm missing some boolean argument here? Thanks!
? It actually seems to work as expected in chrome and IE (sorry don't have Safari handy).
Did you try looking with dev tools at the cascading and computed style rules? There might be a script or !important rule etc overriding your code.
If we use a simple HTML Select element:
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
<option>Seven</option>
</select>
And view this element in IE10+ on a Windows 8 touch-enabled tablet, we find that when the user presses on the drop-down the list repeats, starting at the top of the list again. I understand this is the default functionality but I've been asked to disable it, and stop/snap to the last element. Despite my research and efforts I haven't been able to disable the repeating scroll.
I tried -ms-scroll-chaining but that didn't work (further found that it doesn't apply to my situation), per this link "-ms-scroll-chaining ...prevents the entire page from swiping when the scroll area is fully at one end." Other examples discuss XAML solutions (e.g., updating a combobox ItemPanelTemplate elements CarouselPanel to StackPanel) which doesn't help me because my issue is in an MVC web-page using HTML and CSS.
I think that such behavior is going to be expected by W8-touch users and it should not be prevented.
I doubt that there is an option just for that. If that really bothers you (or your client) you should be able to "solve it" by using javascript-based <select>-replacement solutions like Select2.
I have also posted this question to Codiqa support some time ago, so I am not trying to turn stackoverflow into a Codiqa support center, just know alot of the guys supporting Codiqa are on here, but let me know if I am not allowed to be asking for support for a product on this site...
That aside, I have a select box with size="5" attribute that displays a max of 5 options that are populated via for loop with information from a database. The idea is for this select box to act as a listbox to show the user said information in the select box. However, Codiqa or maybe jquery mobile in general, converts any select box into a button that only can view the content when clicked on. This adds an extra and unnecessary step for my client in this instance. How can I force Codiqa or jquery mobile to honor my size attribute, so the user can see the populated information without having to click to view?
Thank you!
Chrome Browser
Codiqa
Creator of Codiqa here. This is jQuery Mobile behavior that you can disable by telling it to not enhance that form element:
<label for="foo">
<select name="foo" id="foo" size="5" data-role="none">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
We don't have a way to do this right inside of Codiqa yet, but it would be easy enough to add.
Working example: http://jsfiddle.net/bagz8/
You can programatically force select to open itself when page is available:
$(document).on('pagebeforeshow', '#index', function(){
$( "#select-choice-4" ).selectmenu( "open" );
});
This would be a workaround.
EDIT :
Then force jQuery Mobile not to style select boxes. There are several solutions but this one is probably the best: http://jsfiddle.net/bagz8/1/
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select";
});
Warning, mobileinit event MUST be initialized before jQuery Mobile is loaded. You can see it in my example.
There are several other solutions of enhancement prevention and you can find theme here, just look for a chapter: Methods of markup enhancement prevention