Child indicators

That's a great idea!

But I'm not sure that appending a ">" is very good. I have to make sure it's aligned to the right, so I have to append a variable number of spaces, then the ">". But what with the "" option? Then you get something like " >", which is not very nice. Count of sub-categories would increase the number of db queries, but not sure yet by how much.

Patches are accepted ;)

Duplicate of http://drupal.org/node/256010 (which is more active).

Actually this is not a duplicate. That issue is about *node counts*, not *child counts*.

This became super easy thanks to http://drupal.org/node/284739.

However, it seems the CSS to get this done is NOT widely supported. I have to do this:

.hierarchical-select-wrapper .hierarchical-select option.has-children {
  background: url(images/arrow.png) no-repeat right center;
}

But unfortunately, this is not supported in IE or Safari. Only in Firefox.

Patch attached. The attached image should be put in a "images" directory.

I'd *really* like to get this working at the CSS level instead of appending ">" but it doesn't seem that will be possible…

I just tried appending ">" but it doesn't work. The spaces that I add for padding (I definitely want the ">" to appear at the right END of each option!) are simply truncated by the browser. I can't use   either, because that'll end up just like that in the option you can see in the dropdown.

So … only 2 options now: only support this in Firefox, or show fugly, badly aligned ">" characters. Yay. Stupid browsers. First time in a long time that I've seen that only Firefox supports something useful.

Feedback wanted.

Oh and as a test look at http://www.456bereastreet.com/lab/styling-form-controls-revisited/select..., #el03 is the one with a background image. You'll see it only works in Firefox.

Status update.

stephthegeek and Bojhan on IRC couldn't think of a CSS-based solution either.

When I tried using   by adding it afterwards through Firebug, it worked. So either Firebug has magical powers or I simply did something wrong. The latter is more likely :)

It wasn't me being stupid. It works, but it doesn't work properly, because you're not using a monospace font. So it ends up looking like in the attachment. Postponed until browsers support this decently, or until somebody comes up with a clever hack.

I've committed this as-is. It only works in Firefox, but the metadata is already there, so it's better to have this working in one browser than none at all.

The relevant WebKit bug is #9599, to which I'm subscribed.

Not even this works in WebKit:

option:after {
  content: " >";
}

Let alone the more advanced CSS3 alternative:

option {
   content : icon;
   icon : url(images/arrow.png);
}

After hanging around in #webkit, I even managed to get a reply of David Hyatt, one of the main WebKit developers:

WimLeers: How could I get one of you guys to implement a (seemingly tiny) feature? https://bugs.webkit.org/show_bug.cgi?id=9599
dhyatt: WimLeers: what does firefox use to put icons into dropdown lists
dhyatt: WimLeers: what syntax
WimLeers: dhyatt: background: url(images/arrow.png) no-repeat right center;
WimLeers: dhyatt: the goal is: http://dl-client.getdropbox.com/u/12592/Drupal/HS/HS%20child%20indicator...
dhyatt: we can't support background images in menus
dhyatt: not without rewriting them to not use the native menus
WimLeers: Aha!
dhyatt: we could support a single foreground image in cocoa menus
dhyatt: like an icon
WimLeers: But you wouldn't be able to position it?
dhyatt: but unlike firefox our menus are native
dhyatt: so we're much more constrained
WimLeers: yes, and that's noticable, Firefox' menus are ugly…
WimLeers: Fair enough, thanks for the explanation!

So … don't expect this to be supported in WebKit *at all* any time soon, and well … don't get expect IE to support this ever!