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.
Related
In Chrome, I can't select the contenteditable text context by using the keyboard in Chrome when the text contains a long string that wraps to the next line.
This repro's in Chrome (latest; Chrome 47 at the time of my writing this).
Repro steps
Click to place the cursor at the end of the contentedtable div (in the snippet below).
Hold shift and hit the up arrow a bunch of times.
Expected: All text becomes selected.
Observed: The text before the space ("foo") is never selected.
Here's the code. NOTE the character after "foo" is a space, not a newline!
<div contenteditable="true" style="background: #ddd; width: 200px; height: 100px;">foo asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;</div>
Actually, that's the correct behavior of textboxes in general.
In this case, you see the two words in different lines because the second one is wider than the container, so you see a line break and you try to use the up arrow to select "foo".
But, as you say in the question, after "foo" there is a space character, so you must use the left arrow to select it.
Just imagine the same case but with a full width textbox, you would only try to use the left arrow. Only the style changes here, not the behavior for that specific content.
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.
If you go to a page like youtube.com and drag the mouse around while holding down the left button all kinds of things get selected. In the image below, for example, I'm just dragging the mouse along the red arrow and all the stuff at the top got selected and turned blue.
But if I create a jsfiddle - http://jsfiddle.net/nxwLc/ - with a simple div and drag the mouse around with the left button down, I'm not able to select anything. I can even drag completely around the box without selecting it.
Does anyone know what the difference is?
Thanks
<div id="box1"></div>
The selection (highlight) you see is being applied to textual content elements specifically text and images. In your example you have nothing but a <div> element
Now you'll have something to highlight: http://jsfiddle.net/nxwLc/2/
<div id="box1"><img src="//placehold.it/100x100/cf5"/> asdasdasd</div>
Also worth noting that Firefox will highlight exactly what should be highlighted, while in Chrome the highlight area will have unspecific and also unpredicted results, element-related, keeping an eye to line-heights content-flows etc... strange in any case.
Chrome vs. Firefox
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/
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.