The text between the option tags in a select box is not rendering correctly when open in my Chrome Version 37.0.2062.120.
See attached screenshot for a clear illustration of the issue.
When I select an option and focus away from the box the correct option is selected and renders correctly when the select box is closed.
I've tested the same in Canary 39.0.2161.0 and FF and it renders correctly without being distorted.
I've not seen anything like is before.
Anything to do with Chrome's recent font rendering update?
Any help is much appreciated.!
Link to page, form is at the bottom: http://dev.emarkadvantage.com/strategy.php
UPDATE: A fix that worked for me was to move the position of the SVG font down the #font-face stack to the bottom.
I have had this before. Use a standard (i.e. non web) font for your selects. I don't know why web fonts cause a problem...but they do.
See also this answer.
You should add class on select tag,
class="form-control"
<select id="category" class="form-control">
<option value="">Your top callenge today?</option>
<option value="Sales">Sales</option>
<option value="Competition">Competition</option>
<option value="Marketing ROI">Marketing ROI</option>
<option value="Positioning">Positioning</option>
</select>
Related
I have a simple form with some select options that need to do stuff when the options are changed (create new form elements). This all works fine, however when a select option is chosen and the user clicks elsewhere on the page (either another form option or a blank area of the page) the text of the chosen option remains highlighted blue.
I've used select's before and not had this problem, however they weren't linked to the .change function. Is that something to do with why this is happening? Has anybody encountered this issue before? All help greaty appreciated! Code is below...
<div id="container1" class="form-group">
<label class="control-label">Select an option</label>
<div>
<select class="form-control" id="mySelect">
<optgroup label="A">
<option value="1A">Option1A</option>
<option value="2A">Option2A</option>
<option value="3A">Option3A</option>
<option value="4A">Option4A</option>
</optgroup>
<optgroup label="B">
<option value="1B">Option1B</option>
<option value="2B">Option2B</option>
<option value="3B">Option3B</option>
<option value="4B">Option4B</option>
</optgroup>
</select>
</div>
</div>
I've seen the issue brought up here
Remove Blue highlighting of option
However I don't think this quite describes my problem, as it seems to me that that person wants to remove the blue highlighting whilst using the form (hard to be 100% sure though). I don't mind the blue highlighting being there when using the form, I just want it to stop persisting when you stop using the form and do something else on the page.
UPDATE: Problem only seems to occur in Internet Explorer (tested versions 9, 10 and 11). Tested in Chrome and issue doesn't occur. Just to elaborate on the comments, the issue has nothing to do with JS (so I have removed the JQuery code and subsequent tags). The issue occurs when using optgroups in a select form. Loading the HTML outlined above into IE produces the error.
I'm creating a select form and stripped most styles so far, but I'm noticing this weird behavior on safari where the currently selected option has a . before the text in the dropdown. To clarify, if I have a yes/no select with a standard value of yes, if i click the arrow, when the drop down is revealed it says .yes / no
Does anyone know why this may be happening and how to remove it?
Markup
<select>
<option value="1">inexperienced</option>
<option value="2">experienced</option>
</select>
Working on a webapp here that must run on the iPad (so, Safari Mobile).
I have this code that works fine in just about anything except iPad:
<select class="gwt-ListBox" size="12" multiple="multiple">
<option value="Bleeding Eyelashes">Bleeding Eyelashes</option>
<option value="Smelly Pupils">Smelly Pupils</option>
<option value="Bushy Eyebrows">Bushy Eyebrows</option>
<option value="Green Vessels">Green Vessels</option>
<option value="Sucky Noses">Sucky Noses</option>
</select>
What it's supposed to look like is a box with 12 lines ans 5 of them filled up. It works fine in FF, IE, Chrome, Safari Win. But, when I open it on iPad, it's just a single line!
Styling it with CSS doesn't work. It just makes the single line bigger if I set the height. Is there a way to make it behave the same way as in normal browsers, or do I nave to make a custom component?
Thanks.
There is no way to do this. You have to implement your own component.
Source: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf (dead link)
I have two drop downs in a search box, a "YearFrom" and a "YearTo".
When nothing has been selected in the "YearFrom", the "YearTo" box looks a little like this :
However the functionality is that once a "YearFrom" is selected, that the "YearTo" fields only offer what is available AFTER the year from. In essence, we end up with HTML like this :
<select>
<option value="">Any</option>
<option value="1950" disabled="disabled" style="display: none;">1950</option>
<option value="1960" disabled="disabled" style="display: none;">1960</option>
...
<option value="2011" style="">2011</option>
<option value="2012" style="">2012</option>
<option value="2013" style="">2013</option>
</select>
So any years below the YearFrom value are hidden. However what we then end up with is the select list looking like this :
So it isn't so much as a drop down, as now a tiny little box with a scroller on the right.
For reference, this doesn't happen in any other browser. e.g. this is how it looks in Firefox.
I've just come across this error as well.
My guess is that the Chrome browser calculates the drop-down height by measuring the heigths of the options and optgroups, but stops calculating the moment it comes across an element that has no height or is display:none.
To work around this in my own code, I dynamically rearrange the options after each update so that display:none elements are at the bottom of the list. it creates another visual bug (white space on right of dropdown) but I can live with that one.
Working on a webapp here that must run on the iPad (so, Safari Mobile).
I have this code that works fine in just about anything except iPad:
<select class="gwt-ListBox" size="12" multiple="multiple">
<option value="Bleeding Eyelashes">Bleeding Eyelashes</option>
<option value="Smelly Pupils">Smelly Pupils</option>
<option value="Bushy Eyebrows">Bushy Eyebrows</option>
<option value="Green Vessels">Green Vessels</option>
<option value="Sucky Noses">Sucky Noses</option>
</select>
What it's supposed to look like is a box with 12 lines ans 5 of them filled up. It works fine in FF, IE, Chrome, Safari Win. But, when I open it on iPad, it's just a single line!
Styling it with CSS doesn't work. It just makes the single line bigger if I set the height. Is there a way to make it behave the same way as in normal browsers, or do I nave to make a custom component?
Thanks.
There is no way to do this. You have to implement your own component.
Source: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf (dead link)