CODEWITHSUNDEEP
ruby-on-rails-3htmllayouttwitter-bootstrap
Perry Horwich
Perry Horwich

Reputation: 2846

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;
 }

Upvotes: 5

Views: 4419

Answers (3)

KevinH
KevinH

Reputation: 1144

Overwriting the width and set min-height of dt and dd will solve the problem for empty or to long content both for dt and dd.

.dl-horizontal > dt {
  width: 51% !important;
}

.dl-horizontal > dd {
  width: 49% !important;
}

dt, dd {
  line-height: 20px;
  min-height: 20px; /* must be line-height, to allocate height for empty elements */
}

Upvotes: 0

Pigueiras
Pigueiras

Reputation: 19356

Another solution could be this one:

.dl-horizontal > dd:after {
  display: table;
  content: "";
  clear: both;
}

Upvotes: 4

Pavlo
Pavlo

Reputation: 44947

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.

Upvotes: 7

Related Questions