Monday, November 26, 2012


This is probably old hat to css veterans, but, for someone like myself who last did hardcore html work in days of tables, it was a neat trick for me to learn.  On our login page the user is asked to select their location within the hospital.  To start out with, we had a simple selection list with all of the locations.  But, for improved usability, the actual design called for the locations to be grouped into three columns. I was prepping myself for an alignment nightmare when Alex showed me that it could be done simply by setting the "display" attribute to "inline-block".  This allows you to set each element as a fixed width, and, tada, you end up with aligned columns.

To get this...

... all we had to do was this...

<div id="sessionLocation">
       <% locations.each { %>
             <span class="locationOption" value="${}">${ui.format(it)}</span>
       <% } %>


.locationOption {
    display: inline-block;
    font-size: 1em;
    padding: 3px 15px;
    width: 250px;

(Then you can just use some simple javascript to mimic selection list functionality)

I found a good article that discusses inline-block in greater detail:

What’s the Deal With Display: Inline-Block?

All right, I'm going to head back to work on the API now and stay out of the web layer as much as possible... :)

1 comment:

  1. Now that you posted this, I realize that we did a bad UX thing and we have the locations sorted by rows rather than by columns. I don't think it matters much here, as people should rarely be changing this values, but in general the eye wants to read down a column, then down the next, etc.

    So, inline-block is definitely awesome, I'm just not sure it was the right answer here. :-)