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.
Related
I have a very very weird bug. In Google Chrome everything is OK, only IE has this problem.
I use an AngularJS and ui-select component to create a multiple selects.
In IE, when I click into text input element, I can't type anything and even placeholder is not removed.
But when I click to URL address bar or click somewhere into DOM in Developer Tools (after hitting F12) first and then I click into that input, it normally works and I can write into input to filter options.
I tried a lot of with focus/blur, but nothing helps me. Please, did someone have similar problem?
Code:
Turns to:
I found that <input type=“search”> only works in Chrome and IE, but not in Firefox.
How can I make <input type=“search”> show the cancel button (x) in Firefox?
Webkit derived browsers put in an x to clear a value. Firefox does not. However firefox supports this feature, but it does nothing about it and you need to style it your self to show the X button in firefox.
Following link will help you to achieve the goal: HTML Textbox with a clear button in Pure CSS and without JavaScript
While the accepted answer is working as it can be seen in the codepen,
I feel the need to explain how this is working and what to be aware of.
As it took me quite some time to get it working as expected.
For anybody who was wondering how the clear is working type="reset" is causing this. Read more about it here
elements of type reset are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.
This brings us to the second point of what to be aware of.
As the docs explains, the input or button of type reset will only work within a form. However, this creates a problem when having multiple inputs in a form, as all of them will be reset.
Another cavity would be the fact, that while fixing the clear button on firefox this will now produce multiple clear buttons in all the other browsers that do have support for it.
A little feature is that the css content also accepts a url(). This means that for instance custom svg's can be used as a clear icon.
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
});
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 am working on a multiselect option with jQuery UI Multiselect. The items are all inside a jQuery UI accordion. On selecting items the UI is getting updated, and code is written for persisting the selection even if we switch to another panel in Accordion. Everything works fine in FF, Chrome, IE8, IE10 but not in IE9.
After debugging and comparing in IE Dev tools I found the following -
When I log inner html of select element in Dev Tools with
console.log(selectElement.html())
I am getting the "selected" attribute in IE9. And, when I want to remove "selected" attribute for each item manually like -
item.removeAttr("selected")
it shows error as undefined.
So, is there any issue with selected attribute in IE9?
Still couldn't figure out the exact reason and fix. But, resolved it through adding another attribute to tags.
If any one has any idea about this please post your thoughts.