CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
vapoto
vapoto

Reputation: 3

Adapt width of dt and dd to content in dl-horizontal

Using bootstrap I would like to get a responsive definition list with .dl-horizontal. The width of the dt should adapt to the maximum length of its contents, while the dd should take the rest of the width.

This works on a wide screen, but when the screen width is reduced, the margin to the left of the dd stays (since it's defined like that in the CSS). This should somehow become zero when td and dd are stacked, but margin-left: auto; makes the dd text appear over the td.

HTML:

<dl class="dl-horizontal">
<dt>Soup</dt>
<dd>
<ul>
<li>Mushroom </li>
</ul>
</dd>
...
<dt>Desserts</dt>
<dd>
<ul>
<li>Apple crumble </li>
<li>Cold Dessert of the Day </li>
<li>Natural yoghurt with fruit and nuts </li>
</ul>
</dd>
</dl>

CSS:

.dl-horizontal dt {
    width: auto;
}

.dl-horizontal dd {
    margin-left: 3em;
}

Upvotes: 0

Views: 2746

Answers (1)

Ishio
Ishio

Reputation: 765

Adding a float:left; to your dt will resolve the issue. If you use web inspector, over 768px the class applied a float: left;

See here for what I mean. If you click the mobile icon, or scale in the window, it'll appear.

Below is the answer to your question in the comments. For what you want, you'll need to use media queries to resolve when margins should and shouldn't exist. The first option is ideal, as you're telling the browser when to add the margin. The second answer is you're telling the browser when to not add the margin. 768px is generally when tablet sizes start, which is why I am adding in the margin at that, or which is why I am saying the margin is 0 before it hits that part.

@media all and ( min-width: 768px ) {
    .dl-horizontal dd { margin-left: 3em; }
}

or 

@media all and ( max-width: 767px ) {
    .dl-horizontal dd { margin-left: 0; }
}

Upvotes: 1

Related Questions