Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is the display of labels and data not aligned using twitter bootstrap 2 if the content of a <dd> element is blank?

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;
 }
like image 829
Perry Horwich Avatar asked Oct 14 '12 15:10

Perry Horwich


People also ask

How do you style DT and DD so on the same line?

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 .

What is DT DD DL in HTML?

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.

What is a DL tag?

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


2 Answers

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.

like image 84
Pavlo Avatar answered Nov 15 '22 07:11

Pavlo


Another solution could be this one:

.dl-horizontal > dd:after {
  display: table;
  content: "";
  clear: both;
}
like image 21
Pigueiras Avatar answered Nov 15 '22 07:11

Pigueiras