Menu
I am seeing unexpected behavior with the description list <dl> tag.
I am using twitter bootstrap 2 and with this example code:
<!DOCTYPE html>
<dl class="dl-horizontal">
<dt>Item1</strong></dt><dd>This is a description of Item1</dd>
<dt>Item2</strong></dt><dd>This is a description of Item2</dd>
<dt>Item3</strong></dt><dd>This is a description of Item3</dd>
<dt>Item4</strong></dt><dd>This is a description of Item4</dd>
<dt>Item5</strong></dt><dd>This is a description of Item5</dd>
</dl>
... all works as expected and I see this:
Item1 This is a description of Item1
Item2 This is a description of Item2
Item3 This is a description of Item3
Item4 This is a description of Item4
Item5 This is a description of Item5
With this code though:
<!DOCTYPE html>
<dl class="dl-horizontal">
<dt>Item1</strong></dt><dd>This is a description of Item1</dd>
<dt>Item2</strong></dt><dd></dd>
<dt>Item3</strong></dt><dd>This is a description of Item3</dd>
<dt>Item4</strong></dt><dd>This is a description of Item4</dd>
<dt>Item5</strong></dt><dd>This is a description of Item5</dd>
</dl>
I see this problematic display:
Item1 This is a description of Item1
Item2 This is a description of Item3
Item3 This is a description of Item4
Item4 This is a description of Item5
Item5
And the <dt> and <dd> tags do not match-up as expected.
Reading the w3.org working draft here http://www.w3.org/TR/html-markup/dl.html#dl
... it's not clear to me if the browser or the programmer are responsible for matching up the <dt> and <dd> elements when the content for <dd> is blank.
I tested the above code in firefox and Safari and see the same output.
Is this a matter of opinion, a bug in twitter bootstrap 2, or am I misunderstanding the use of the HTML5 description list? This use of <dl> appears in show.html.erb code auto generated by
rake g bootstrap:themed model
If a data element is blank, the displayed output does not match the label. It's unfortunate, because the themed option is pretty useful otherwise.
I can partially 'fix the problem' by modifying the themed output to look like this:
<dt><strong><%= model_class.human_attribute_name(:name) %>:</strong></dt>
<dd><%= @server.name %> <%= "-blank-" if @server.name.blank? %> </dd>
... but I am left seeing "-blank-" to display the blank elements. If I use something like a string containing a space, like " ", I still see the same label-description misalignment problem.
Please try to focus your answer on describing which entity, the HTML5 <dl> tag, bootstrap, or my understanding, is off target here and why.
Thanks very much!
-EDIT- For those working with bootstrap, using css like this works fine:
dt, dd {
line-height: 20px;
/* Keep this the same as line-height */
min-height: 20px;
}
829
This can be accomplished by adding a DIV element with the CSS overflow: hidden; around the content of the DD tag. You can omit this extra DIV , but the content of the DD tag will wrap under the floated DT .
Definition and UsageThe <dd> tag is used to describe a term/name in a description list. The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names). Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.
Definition and Usage The <dl> tag defines a description list. The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).
By default <dt> and <dd> are block-level elements, there is no need "align" them in any way, they naturally displayed one after another.
Bootstrap's .dl-horizontal, however, lines up this elements side-by-side. And when one of <dd> has no content, it's collapsed and others are shifted up. (Which obviously what you don't want.) This behaviour could be "fixed" like this:
dd {
/* should be the same as line-height */
min-height: 20px;
}
But I would not referenced this as a bug in Bootstrap. Why do you want to have a definition term with no definition? Do not displaying the term at all makes much more sense to me.
84
Another solution could be this one:
.dl-horizontal > dd:after {
display: table;
content: "";
clear: both;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
