CODEWITHSUNDEEP
css
jose
jose

Reputation: 1562

Two side by side div's behaving as a single block

Div's

<div class="row">
  <div class="column">
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
    </ol>
  </div>
  <div class="column">
    <ol>
      <li>FirstB</li>
      <li>SecondB</li>
      <li>ThirdB</li>
      <li>FourthB</li>
    </ol>
  </div>
</div>

Css

.row {
  display: flex;
  flex-wrap: nowrap;
}

.column {
  flex: 50%;
 }

The example displays two div's side by side correctly.

************   **********
First          FirstB
Second         SecondB
Third          ThirdB
Fourth         FourthB
***********   **********

Problem to solve:

If the div's are rendered before a page break, and the available space is equivalent to two lines of the list (First and Second) these two lines are displayed before the page break and the others and the second div after the page break.

************ 
First        
Second       

page break
________________________

Third          ************* 
Fourth          FirstB
***********     SecondB
                ThirdB
                FourthB
               ***********

My goal is to make the two div's behave as a single block. ie if before the page break there is not enough space available for both div's (lists) they must pass together, as a single block, to after the page break.

The problem is quite evident if converting html to multipage pdf.

EDITED

Laravel blade file to pdf with DomPDF

Upvotes: 0

Views: 61

Answers (1)

John Skiles Skinner
John Skiles Skinner

Reputation: 2028

Apparently as of 2020 DomPDF does not support flexbox. It seems DomPDF has long refused to support float or table CSS styling. Hence it may be impossible to make two side-by-side divs with the technology you are using.

As I noted in my comment, you may want to experiment with adding some CSS like this:

.row {
  page-break-after: always;
}

Or perhaps a page break both before and after the row

For the future, you should include the technology you are asking about in your question. You should tag it, if possible. The tag css is far too vague for a question about a very specific PHP package.

Upvotes: 1

Related Questions