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)
Related
A simple code:
<select size=5 style='height:100px;'>
<option value='1'>one</option>
<option value='2'>two</option>
</select>
Desktop browsers will show a 100px height list with 2 visible elements.
Chrome and Safari for iPad show a drop-down list with no visible elements.
I have found in google some discussions about it, they are from 2010 and without a solution - they say that this does not break w3c specifications. I can agree that it was ok for old little 320x240 smartphones.
Is it still not working on modern 10" 2160x1620 iPads?
This is a known bug in webkit browsers.
The simplest way to get it to work just how you like it in Chrome and Safari would be to manually specify the styling the select itself.
select {
height: 54px;
font-size: 14px;
}
<select size="3">
<option value="">Default</option>
<option value="1">op1</option>
<option value="2">op2</option>
<option value="3">op3</option>
</select>
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>
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 come across a strange CSS issue.
I have a drop down selector like this HTML markup:
<select id="cat_p" name="cat_p" onchange="ListChildCategories(this.options[this.selectedIndex].value, 0);" class="required validate-list">
<option value="-1" selected="selected">- Choose a category</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
<option value="5">Category 5</option>
</select>
Now, I want to hide one of these select option (let´s say Category 5) using CSS, so I use this CSS code:
select#cat_p option[value="5"] {
display: none;
}
And the result is perfect in Chrome and Firefox, but in Safari and IE this CSS does not work.
I have checked in Safari developers panel and I can see that the CSS is registered as valid and it is not "crossed out" / overwritten by other CSS, so it should work, I would think.. very weird..
Does anyone have a clue what the problem is here?
I made a fiddle so you can see the problem first hand:
http://jsfiddle.net/wH8kF/
You can not use toggle or display:none property or the hide/show with select option in the Safari browser. It is working for all other browsers like Chrome, Firefox, etc. This is part of a long and inconsistent tradition with Safari restricting CSS styling functionality on form elements, believing the visual language of interactive elements should be consistent with the OS (no point trying to find a rationale for IE's failings).
Your only options are either to remove it (and re-append it later), or to set it to optnz.disabled = true. Sorry for the bad news!
I have a multiple select and I'm having the following issue in IE.
The options seem to overlap and appear jumbled in IE. When I click on an option, then it renders normally. FF, Safari, etc display it fine. Any ideas on how to fix this issue?
Here's an example of the HTML:
<select multiple id="C" name="playArray[]" class="tabStyle" onChange='add_player(this, "1");' size="10">
<option value="593266">Anderson, Bryan</option>
<option value="1522585">Arencibia, J.P.</option>
</select>
.tabStyle just sets the width of the select.
Thanks in advance!