Twitter Bootstrap Question posted in

In Bootstrap4 an empty <dd> collapses line height for corresponding <dt>-Twitter bootstrap

So I can see that this error has had previous chatter on

prevent-twitter-bootstrap-empty-dd-filling-with-next-dd-value

and that the developer had previously said it wasn’t be fixed but…

Output

As shown empty address fields result in the margins between the labels collapsing. It is produced via a Django template with:

<dl class="row">
      <dt class="col-sm-3">Address 1:</dt><dd class="col-sm-9">{{ client.address1|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">Address 2:</dt><dd class="col-sm-9">{{ client.address2|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">Town:</dt><dd class="col-sm-9">{{ client.town|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">County:</dt><dd class="col-sm-9">{{ client.county|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">Postcode:</dt><dd class="col-sm-9">{{ client.postcode|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">Telephone1:</dt><dd class="col-sm-9">{{ client.telephone1|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">Telephone2:</dt><dd class="col-sm-9">{{ client.telephone2|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">Email:</dt><dd class="col-sm-9">{{ client.email|default_if_none:"&nbsp;" }}</dd>
</dl>

Note: I have tried to force a space incase that would create a line. I would have thought that the linespacing would have been set by dt which I understand should always exist and should never be empty?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    So I have managed to fix this although it feels like a hack and I'm surprised that Bootstrap hasn't got this under control. Using the answer above (which I had previously tried a variation of) I have ended up with:

    dd.col-sm-9 {
    min-height: 25px;
}

    Because a neat dd declaration results in:

    Col Min-Height Over Writes DD Min Height


  2. 0

    Just set a min-height to every dd element like this:

    dd {
 min-height: 25px;
}
    Login or Signup to reply.
  3. 0

    you could try this:

    dl dd:after {
  content: "200b";
}

    that is a 0px width space and will not create a new line

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search