CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Chris Farrugia
Chris Farrugia

Reputation: 1046

How can I prevent my <dl> from wrapping at very low resolutions?

I have a div with a class col-sm-12 and inside of it, I have something along these lines:

<dl class="dl-horizontal">
    <dt>Price:</dt> <dd>${{ number_format($listing->CurrentPrice,0) }}</dd>
    <dt>Status:</dt> <dd>{{ $listing->Status }}</dd>
    <dt>MLS Number:</dt> <dd>{{ $listing->MLSNumber }}</dd>
</dl>

I like the way it looks on a large screen but on a small screen, e.g. iPhone at 640px wide, the <dd> tags break onto another line even though there is plenty of room.

On a large screen, that section looks like this:

Large Screen Screenshot

When I go to the iPhone screen at 640px wide, it looks like this:

iPhone Screenshot

How do I keep the <dt> and <dd> on the same line in Bootstrap 3 when I get to very small resolutions?

Upvotes: 1

Views: 1437

Answers (4)

Asons
Asons

Reputation: 87231

As I commented, simplest is a min-width on your dl, but you need to know the max width that a dt and dd can be together, lets say 250px, and setting your dl rule with min-width: 250px; will make it not break line.

A better way would be to use floats.

If you don't want line breaks, just add white-space: nowrap; to the .dl-horizontal dd rule.

.dl-horizontal dt, .dl-horizontal dd  {  
  float: left;
  margin: 0;
}
.dl-horizontal dt {
  text-align: right;
  font-weight: bold;
  width: 100px;
  margin-right: 10px;
  white-space: nowrap;  
}
.dl-horizontal dd {
  width: calc(100% - 110px);
}
<dl class="dl-horizontal">
    <dt>Price:</dt> <dd>sjdsdjfhksjhfksjdh fkjsdh fkjsdh fkjsdh fkjsdhfkjs kfjhsdkf sdf jksdf ksdjhfks fdfsdf</dd>
    <dt>Status:</dt> <dd>{{ $listing->Status }}</dd>
    <dt>MLS Number:</dt> <dd>{{ $listing->MLSNumber }}</dd>
</dl>

Upvotes: 4

Oriol
Oriol

Reputation: 288480

I recommend using di wrappers and CSS tables.

di was an new element proposed for XHTML 2, which could have been used to group dt and dd elements.

It doesn't exist in HTML5, but who cares?

dl {
  display: table;
  border-spacing: 1em .2em;
}
di {
  display: table-row;
}
dt, dd {
  display: table-cell;
}
dt {
  font-weight: bold;
  text-align: right;
}
<dl class="dl-horizontal">
  <di>
    <dt>Price:</dt>
    <dd>${{ number_format($listing->CurrentPrice,0) }}</dd>
  </di>
  <di>
    <dt>Status:</dt>
    <dd>{{ $listing->Status }}</dd>
  </di>
  <di>
    <dt>MLS Number:</dt>
    <dd>{{ $listing->MLSNumber }}</dd>
  </di>
</dl>

Upvotes: -1

Pevara
Pevara

Reputation: 14310

If you inspect the behaviour in your browser carefully while resizing the window, you'll notice that the following styles are applied to screens wider then 768px.

@media (min-width: 768px) {
    .dl-horizontal dd {
        margin-left: 180px;
    }

    .dl-horizontal dt {
        float: left;
        width: 160px;
        overflow: hidden;
        clear: left;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

So to get that behaviour on small screens, all you need to do is add those style rules to your custom stylesheet, but outside a media query, so they get applied no matter the screen size.

http://www.bootply.com/htGYTQPo1N

Upvotes: 0

Kabilan Senapathy
Kabilan Senapathy

Reputation: 134

Use white-space: nowrap; for your element.

Upvotes: -1

Related Questions