CODEWITHSUNDEEP
htmlcssiosmobile-safari
wmarbut
wmarbut

Reputation: 4685

IOS Safari <select> element

I have a hierarchal dropdown menu that visually differentiates hierarchy by using space characters

Example

<select>
    <option value='1'>Top Level Item</option>
    <option value='2'>&nbsp;&nbsp;&nbsp;Lower Level Item</option>
    <option value='3'>&nbsp;&nbsp;&nbsp;Another Lower Level Item</option>
    <option value='4'>Another Top Level Item</option>
</select>

This works well in all browsers except for the iPhone where the spaces are ignored and all items are shown at the same level.

I'm using a reactive design (same DOM for mobile and desktop) and have decided that integrating jQuery Mobile just for the themed select isn't a good option.

Are there any easy work arounds or small plugins that might help me accomplish this for IOS browsers?

<optgroup> elements are not a good fit b/c some of the parent options can be selected. <optgroup> do not allow for selecting the parent categories as best as I can tell

The core of the requirement for this feature is that all of a particular site's navigation must be on one dropdown like element that is touch friendly.

Upvotes: 1

Views: 5629

Answers (3)

MorganEngel
MorganEngel

Reputation: 83

This seems to work well for my needs, but it's not completely perfect -- on desktop there's an unselectable line at the top. 

<select>
    <optgroup>
        <option value='1'>Top Level Item</option>
        <option value='2'>&zwj;&nbsp;&zwj;&nbsp;&zwj;&nbsp;Lower Level Item</option>
        <option value='3'>&zwj;&nbsp;&zwj;&nbsp;&zwj;&nbsp;Another Lower Level Item</option>
        <option value='4'>Another Top Level Item</option>
    </optgroup>
</select>

Upvotes: 0

Se&#241;or
Se&#241;or

Reputation: 126

You might try to start your hierarchy-divider with the Zero Width Joiner / Zero Width Non-Joiner Entity using: &zwj; or &zwnj;

Upvotes: 11

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

The only alternative is to use an HTML/CSS replacement for <SELECT>.

See: jQuery select box replacement

Upvotes: 0

Related Questions