sarken/otwarchive — comment on commit a23141804c300b42dd188bd431f70656b77eaf33
File:  line 0
By limithub:

YAY, so glad you're coding on this!

This is all good! As you are venturing forth from the sandbox into the cascade I will try and take you on a bit of a tour of the process I would use to integrate this code.

As this is a pattern we might well want to reuse, it would be good to generalise this to the existing rules for listbox, to save some repetition (DRY) and so if a back end coder builds another alphabet-based listbox like this somewhere else in the archive, we have the style all ready to go and we don't have to write any more code.

So if we instead:

1) Add

.alphabet .listbox li

to the existing rule for

li.listbox.medium

like so (moderately generalised that one as well while we're at it):

.media li.listbox, .alphabet .listbox li
{ width: 45%; float:left; clear:none; margin-right:1.5em}

2) Add the specific .media rule:

.media li.listbox
{ min-height:17.5em;}

3) Now things get exciting and tricky! The index is not floated, so you'd think we need an overflow:hidden or else those floats won't be contained. We COULD generalise in this way:

.listbox .index { overflow: hidden; }

except this might cause problems when someone tries to put in a piece of dynamic expanding content like the autocomplete, and display table of course has some complicated problems of its own. So what we'll do, which will make .listbox generally more robust, is give the index a clearfix, so:

.listbox .index:after
{ content:" "; display:block; height:0; font-size:0; clear:both; visibility:hidden; }

And then trigger haslayout in the conditional if equal to or less than IE8:
.listbox .index{zoom:1}

4) Something to consider: it would be a further saving to convert the top level float clear to this too, because then could get rid of turning the overflow on contextually, but it would probably mean rejigging in Home Zone because of the dashboard, so we'll leave that overflow:hidden on .listbox (line 6) for now and its contextual overflow:visible (line 31). This might be the tipping point between dependency and redundancy.