DOMPDF: List items overflow with 50% width

user_1788961 0
Viewed 1221

I'm using DOMPDF to generate PDF invoices. Now I have a problem with some <li> elements. The elements are 50% in width. The <ul> has a width of 100%.

But the <li> elements still have an overflow. See image on the right. enter image description here

This is my current CSS code:

ul {padding-top: 8px; padding-left:0px; margin: 0; list-style: none; border-top: 2px solid #000000; display: block; width: 99%;}
ul li {display: inline-block; width: 50%; margin-bottom: 4px;}
ul strong {display: inline-block; width: 40%;}

Is there anything I've missed or a known bug?

dompdf css html
1 Answers

Update

Since DOMPDF does not yet support flexbox, I've included an inline-block version that should work for you. To work around the possible white-space issues you may have encountered, I've omitted the closing </li>, which does not affect the validity of the HTML in any way.

ul {
  padding-top: 8px;
  padding-left: 0px;
  margin: 0;
  list-style: none;
  border-top: 2px solid #000000;
  display: block;

}

li {
  width: 50%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 4px;
}

.item {
  margin-bottom: 10px;
}

.item strong,
.item .text {
  display: inline-block;
  vertical-align: top;
}

.item strong {
  width: 40%;
  display: inline-block;
  white-space: nowrap;
}

.item strong::after {
  content: ':';
}

.item .text {
  width: 60%;
  padding: 0;
  margin: 0;
}
<ul>
  <li>
    <div class="item">
      <strong>My Label</strong><p class="text">My text here</p>
    </div>
  <li>
    <div class="item">
      <strong>My Label</strong><p class="text">My text here</p>
    </div>
    <div class="item">
      <strong>My Label</strong><p class="text">My long text here My long text here My long text here My long text here My long text here</p>
    </div>
    <div class="item">
      <strong>My Label</strong><p class="text">My text here</p>
    </div>
</ul>

jsFiddle

Using inline-block can sometimes pose issues as white-space in the HTML becomes part of the render. I would approach this using flexbox for the ul as well as the lis. Finally, I added a bit of markup around the content of the li, making it, too, a flexbox parent.

ul {
  padding-top: 8px;
  padding-left: 0px;
  margin: 0;
  list-style: none;
  border-top: 2px solid #000000;
  display: block;
  width: 99%;
  display: flex;
}

li {
  flex: 1 0 50%;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  margin-bottom: 10px;
}

.item strong {
  flex: 4;
  white-space: nowrap;
}

.item strong::after {
  content: ':';
}

.item .text {
  flex: 6;
  padding: 0;
  margin: 0;
}
<ul>
  <li>
    <div class="item">
      <strong>My Label</strong>
      <p class="text">My text here</p>
    </div>
  </li>
  <li>
    <div class="item">
      <strong>My Label</strong>
      <p class="text">My text here</p>
    </div>

    <div class="item">
      <strong>My Label</strong>
      <p class="text">My text here</p>
    </div>
    <div class="item">
      <strong>My Label</strong>
      <p class="text">My text here</p>
    </div>
  </li>
</ul>

jsFiddle

user_9492170
Related