Multi-Column Bootstrap Definition Lists using JQuery

Multi Column Definition List

Multi Column Definition List

I’ve recently spent a bunch of time getting back into the world of HTML after many years in the world of WPF and Silverlight.  My recent visit to TechEd confirmed the rumours that Silverlight has stagnated and ultimately failed to tick the accessibility support box which has forced our hand back towards HTML.

Fortunately, in my absence, frameworks like JQuery and and Twitter’s Bootstrap have emerged (yes it has been that long!) and now creating a cross-device/browser website has become an enjoyable experience.  However, one of the things that has always bugged me about creating semantically correct HTML was that it always resulted in lots of vertical lists not making the most of horizontal space if it’s there.  In steps a bit of nifty JQuery to save the day…

Bootstrap provides some pleasant out the box layouts and styling (other, more interesting styles freely available) for the HTML definition list tag (<dl></dl>) which accurately marks up this kind of label/value data, but only provides a single column of labels/values.  Adding a few extra styles, some JQuery and and extra class or two to your mark-up et voilà:

Multi Column Definition List

Multi Column Definition List

Not satisfied with a picture the see the page for yourself and also check out the code.  As you’ll see it also maintains it’s lovely responsiveness:

Multi Column Definition List Responsive

Multi Column Definition List Responsive

Along with the normal JQuery/Bootstrap js and css you’ll need to add references to your own copies of:

<link href="css/tribal-form.css" rel="stylesheet" />

and:

<script type="text/javascript" src="js/tribal-shared.js"></script>
<script type="text/javascript" src="js/tribal-form.js"></script>

and then in your mark-up add the following to your <dl> tag:

<dl class="dl-horizontal dl-multicolumn" data-colcount="3">

Just using the “dl-horizontal” class results in a similar view to Bootstrap out-of-the-box but auto-adjusts the width of all the <dt>‘s to be the width of the widest label text so as to not waste any space or clip the labels as it tends to do in its default state.

Adding the “dl-multicolumn” class provides you with a 2 column view.

Adding the “data-colcount” attribute alongside the “dl-multicolumn” class allows you to specify a number of columns greater than 2 should you wish. Not providing it defaults to 2 columns.

Follow me on Twitter

LinkedInShare

About Ben Lowe

Ben has been involved in designing and implementing systems in the education sector specialising in facilitating complex processes, actions and data visualisations in intuitive and targeted solutions that optimise the users’ productivity and experience. Follow Ben on Twitter.
This entry was posted in Open Source, Projects, User Experience and tagged , , , , . Bookmark the permalink.
  • Mats

    Nice idea! I had two problems with it; the layout breaks if you resize the browser window and it will always divide the available space to the dd’s, making for a very “airy” layout in some cases.

    • ben_lowe

      Hi Mats, thanks for the comment. Which browser are you using to result in the resize causing it to break? I’ve been using Chrome and IE9 and all the resizing works fine.
      Not as airy as it was when it just 1 column! The dd’s wrap text automatically so you should use as many columns as makes sense for the size of your dd data. Those bottom dl’s in the example page don’t really get airy at all. Obviously if you have a huge screen resolution then they will get spread out.
      I had thought about trying to make the number of columns dynamic but then the pattern of the data could change which would make it confusing to users who expect to see a particular field in a particular location.