CODEWITHSUNDEEP
csstwitter-bootstrap
Rami GB
Rami GB

Reputation: 819

Prevent Twitter bootstrap empty <dd> filling with next <dd> value

Hello CSS gurus out there,

I love the twitter bootstrap, and I am prototyping a lot of projects based on it, I encountered this problem, where if the dd tag has no HTML inside of it, another dd takes it's place, I understand why this is happening, because of the way the dl is styled it allows dd to expand to more than one row if the content needs to, i don't want to break this lovely styling, i just want to modify it so if the dd value is empty, it just won't collapse, so before i do anything crazy here like server side to hide empty values, or modifying the original behavior or even adding jQuery, i wanted to know if anyone could help, this is a picture to illustrate further what i am saying, it's RTL so the dt is on the right.

Upvotes: 30

Views: 8768

Answers (5)

Jean F.
Jean F.

Reputation: 1785

Maybe you can try just that:

dd {
    display: inline-block;
}

Upvotes: 0

lulalala
lulalala

Reputation: 17981

According to the developer, <dd> should never be empty (which I disagree).

And I think he prefer users to add clearfix class to the <dd>s that might be empty.

<dd class="clearfix"></dd>

Update

This fix is included after 3.2, see release note.

Upvotes: 19

user3172824
user3172824

Reputation: 311

Example:

<dd><%= @route.id %>&nbsp;</dd>

http://www.sitepoint.com/forums/showthread.php?442551-When-dd-%28in-a-definition-list%29-is-empty-below-content-is-pulled-upwards

Upvotes: 2

rebroken
rebroken

Reputation: 633

If I'm interpreting this commit properly, this will be default behaviour in 3.0.0. Until then you can also try adding dl-horizontal as an alternative to simply clearfix.

<dd class="dl-horizontal"></dd>

Upvotes: 1

Ga&#235;l Marziou
Ga&#235;l Marziou

Reputation: 16294

I used this style override.

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

Upvotes: 55

Related Questions