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
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
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.
