CODEWITHSUNDEEP
csstwitter-bootstrap
Ram
Ram

Reputation: 3091

Empty dt in dt-horizonal not aligning with other dt elements

I have a description list with class .dt-horizonal in which I make sure dt content doesn't truncate by following this post and increasing the width. It works fine but when there is an empty dt it doesn't work thus the alignment of next dd(Canada) is not right as you can see in the following output. Can someone help me fix this?

Bootply

Current output

Output

HTML

<dl class="dl-horizontal">
  <dt>Name</dt>
  <dd>Joe</dd>
  <dt>Age</dt>
  <dd>25</dd>
  <dt>List of Countries visited</dt>
  <dd>USA</dd>
  <dt> </dt>
  <dd>Canada</dd>
  <dt>Country of Orgin</dt>
  <dd>Brazil</dd>
</dl>

CSS

.dl-horizontal dt 
{
    white-space: normal;
    width: 250px; 
    margin-right: 8px;
}

Upvotes: 4

Views: 548

Answers (2)

vas
vas

Reputation: 960

check out this Add this Css since we add property to the empty content the width is maintained 

.dl-horizontal dt:before {
  float: left;
  content: " ";
  height: 1px;
}

Upvotes: 2

Aaron
Aaron

Reputation: 10450

Add a non breaking space to the dt, this will give it some content and maintain the layout. See Here : http://www.bootply.com/Vbo6v6JiaS

<dl class="dl-horizontal">
  <dt>Name</dt>
  <dd>Joe</dd>
  <dt>Age</dt>
  <dd>25</dd>
  <dt>List of Countries visited</dt>
  <dd>USA</dd>
  <dt>&nbsp</dt>
  <dd>Canada</dd>
  <dt>Country of Orgin</dt>
  <dd>Brazil</dd>
</dl>

Upvotes: 3

Related Questions