To get this...
... all we had to do was this...
<div id="sessionLocation">
<% locations.each { %>
<span class="locationOption" value="${it.id}">${ui.format(it)}</span>
<% } %>
</div>
and
.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... :)
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.
ReplyDeleteSo, inline-block is definitely awesome, I'm just not sure it was the right answer here. :-)