I need some HTML/CSS guidance. My goal is to create a contacts list screen in my app, and like most contacts list screens, users should be able to pick a letter the name starts with, and the app will filter to that letter. Easy enough.
How I’d like the UI to look is something like this:
Find by Name | all # a b c d e f g h i j k l m n o p q r s t u v w x y z
Where everything to the right of the | is a clickable link.
My problem is that I’ve got a dynamic width UI, and I’d like the bar to take up the whole width of the users browser even as they resize–so the letter z should be on the far right end. I’d like for there to be even spacing between the letters.
The “Find by Name” text can in another module could read: “Find by Street Name”, so that isn’t fixed width either.
How is this best accomplished in css/html? If it matters, i’m not using a fixed width font.
Put each letter in an element with a width of 3.8% (100/26).
The drawback to that is you’ll run into some odd rounding issues in some browsers.
Personally, I wouldn’t try to make them span the entire width. The way you have now seems to be visually proper.