In Internet Explorer 10 the behavior of drop-down boxes (<select> element) has changed: when expanding the box, instead of placing the list of options below the field, the list overlays the field, with the list positioned so that the currently-selected element is centered over the input field.
This is a little hard to describe, so here's a jsFiddle that shows it.
Our users are finding this behavior very confusing. Is there anything I can do in CSS to make the box behave like it did in IE9, and like every other major browser? (Perhaps something like the -ms-clear pseudo-element that hides the clear button in IE10 text input fields.)
Here's a sort of time-lapse screenshot:
One option is dynamically change size property of the select to the number of options (or a fixed number - if you have too many options). You would do it on mouse-down, and change it back on-change.
Style, Position of select as well as additional events will have to be tweaked - but here is the proof of concept: http://jsfiddle.net/KnAXL/1/
Related
I use a Hide/Show .js script that hides some checkboxes and on the right side there is the search field when I click to hide it I want to expand.
Ex.
Before hidding:
Before hidding Image
After hidding I want the search field to be expanded 100%
After hidding Image
I searched for 2 days something and can't find a way to make it expand I use the bTemplate engine to store the HTML code.
Did you try changing the CSS properties through the "setAttribute" method of the elements in question through Javascript? Basically, the code you used to "hide some of the checkboxes" in the first place is pretty much like how you'd write the code to do the other things you're looking to do.
In other words, When you want the checkboxes out of view and the text entry box centered, as in your second reference pic, you could have the Javascript code written through the "setAttribute" method so that when a particular event happens, the css "display" parameter for the check boxes could be set to "hidden", the size of the text entry box can be increased, and the css "position" parameter for the text entry box can be set to have it centered, etc.
That is, of course if I understand your issue correctly. Can you provide the code you are using? I'm sure me or someone else could clarify things more if we could see what you have written.
Hope that helps at least a little! :)
I must have tried a hundred time by now to select an html element and then create a snippet with Chrome SnappySnippet, but each time I get the error
Error! DOM snapshot could not be created. Make sure that you have inspected some element.
In this video it looks easy, but out of those 100 times, I have been able to make it work once with something random.
Question
Is the selection somehow time based, so I have to click on SnappySnippet in e.h. less than a second?
How do you keep the selected element, so when moving the mouse to the SnappySnippet button other elements are not selected from hovering them?
Use the tree-DOM menu, left click on a div so it becomes dark blue. Now it is selected even thought hovering the mouse over other div's it will remain selected.
The problem you have is probably because SnappySnippet can't handle large div's. Try with a very small one first.
The text in select box elements are being truncated on inital load, until a user clicks on the select box it looks like this:
Once the user clicks, the text will expand to say "Female". This only happens in IE.
Also, it seems like if there is sufficient text in the select box, then thee truncations will not happen. I just noticed this behavior:
I assume there is no style hook for a select's text? Based on this info, I think that appending a bunch of white space to an option that's length is less than 6 chars (or somethign) would be an acceptable if not annoying solution.
Here is what the select looks like once it gets focus:
I tried every solution in this post:
Select dropdown with fixed width cutting off content in IE
Which seems to be to "go to" post for this issue. Neither JavaScript or css techniques seem to solve this bug.
It seems like this would be a common problem; can someone suggest a pure css fix that addresses this bug in IE that is not mentioned in the post above?
Thank you.
I have a select list in IE 8 it works ok.
On Firefox 3 and 4: I cannot click on the select box, unless I move the mouse 0.5cm below the actual select box.
On Webkit the same as firefox, plus by default it looks blank with no options in it until clicked?
The page is http://gocruising.com.au/Cruises/Search the select list is on the right "sort results by"
I know there must be some invalid HTML somewhere but I cannot see it.
Your <div class="icons">...</div> is hanging down, meaning the click events on the control are really click the the div.
You may need to make that div smaller, reposition it, or lift the select above using z-index.
I'm trying to re-make an existing ASP.Net page which generates labels. The original uses hideous tables-within tables-within tables to force a layout, and as our order quantity has increased it's now got to the point where it's spitting out 65k lines of HTML assuming it doesn't time out first.
I've replaced it with an unordered list for my list of lables, with each list item floated, and the on-screen layout is now perfect. For print, it's 4 labels per page, one in each corner.
However, at least in IE-land, go to print preview and it goes back to being a vertical list.
Any thoughts?
make sure you are using a float:... in your css of li class it will fix it :)
Let me know if that helps
Changed from UL/LI elements to the ubiquitous DIV, and placed every set of 4 inside a container which did the job. Still none the wiser about why FireFox, Chrome and IE all ignored float:left in print though, but it's working now.