How to indent multiple levels of select optgroup with CSS?

Question

Just trying to indent optgroup blocks by nesting depth really, I've tried a general margin-left rule, nested elements then trying to apply the same rule, tried padding-left... is indenting like this possible? It seems elementary :P

In the example below, the optgroup labelled 'client2_a' should be indented more than the others, because it is nested inside 'client2'.

http://jsfiddle.net/Tb5Rc/5/

Impolite

related: #1038232 – Chapel

Answer 1

8/29/2016 Edit

The original answer below is no longer functional in modern browsers. For those who still need to use a tag instead of doing magic with HTML lists, a better solution was found on this stackoverflow thread: Rendering a hierarchy of "OPTION"s in a "SELECT" tag

I would recommend the solution suggested by igor-krupitsky who suggests dropping   and using the binary   instead. At least on Chrome, this does not break using the keyboard to find the first character of an item in the list.

End Edit

The current HTML specification does not provide for nested tags adding any functionality (such as indentation). See this link.

In the mean time, you can manually style your levels with CSS. I tried using styles in your sample, but for some reason they did not render correctly, so at the very least the following will work:

<select name="select_projects" id="select_projects">
        <option value="">project.xml</option>
        <optgroup label="client1">
            <option value="">project2.xml</option>
        </optgroup>
        <optgroup label="client2">
            <option value="">project5.xml</option>
            <option value="">project6.xml</option>
            <optgroup label="client2_a">
                <option value="" style="margin-left:23px;">project7.xml</option>
                <option value="" style="margin-left:23px;">project8.xml</option>
            </optgroup>
            <option value="">project3.xml</option>
            <option value="">project4.xml</option>
       </optgroup>
       <option value="">project0.xml</option>
       <option value="">project1.xml</option>
    </select>

Hope that helps.

Illlooking

Thoroughly unhelpful! Ok, the spec is - not you. Thanks for pointing that out - yeah I think I'll output many single level optgroups and give them dynamically organised indentations. – Impolite

I moved away from Select eventually. Lists are far more malleable :) – Impolite

Current browsers remove/move optgroups positioned inside other groups. They all tend to correct html errors. As this usage is not in the specs, in render, when the second, third, etc optgroup appears, previous one is automatically closed. – Landowner

Not sure that this ever worked, but it certainly doesnt work now – Forspent

Answer 2

It's amazingly simple than styling. The answer came to me afte hours of strugling :)) . The optgroup and option tags are defining strings in read-only mode, actualy. So for you to indent any of the optgroup or option content, you just use simple space in the names or &nbsp.

It's that simple :) !

Woodchopper

I don't know why you would get down voted, that is lame. this is a very clever hack that does, in fact, work. kudos to you! – Docile

@viggity: ...and breaks usability. – Speciation

@SébastienRenauld: When life gives you lemonade... you curse the W3C. – Analiese

@Sébastien Renauld Obviously, this solution is a hack for impossible, I appreciate it instead of accusing it. At the end, all the fancy things we done on web pages when there is no available methods, we are HACKING IT OUT! – Improvident

This hack breaks usability. You can't find values by keyboard anymore – Rolfe

Answer 3

As an addendum to lucian's answer, newer versions of Chrome don't seem to support having   embedded in the text. It will actually show the ampersand etc instead of giving you the non-breaking space. However, I found that using the unicode version of the non-breaking space will still work ok.

I'm using Scala so was able to just have "\u00A0" in my server-side code. You probably could paste the unicode character directly into your code but I wouldn't recommend it (just because it'd be so hard to tell that it isn't a normal space).

One nice thing is that Chrome at least will ignore the spaces in terms of keyboard navigation. If I have an option named Test, typing t still will move the highlight right to it, no matter how many non-breaking spaces prepend it.

Needful

Answer 4

Add to the css this:

option {
text-indent: 10px; 
}

Done.

Belayneh