Some elements with auto margins receive no height #1482

jbnv · 2017-06-30T19:54:26Z

I have a document that, "out of nowhere," started formatting improperly. In debugging the issue, I found that the noticeable change was upgrading DomPDF to v0.8. I rolled back DomPDF to earlier versions, and identified that the PDF produced was correct under v0.7 but wrong under v0.8.

The issue: The document has a two-part page header. In v0.7 it renders correctly. In v0.8, the second part of the header is rendered on top of the first part. I have attached the source code for the page as well as the PDFs rendered by v0.7 and v0.8.

This was observed in PHP 5.6.22. I loaded and configured DomPDF through Composer.

<html>

<head>
  <title>JQWJQW Inspection - License / Application #8076 - Development</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <style>
    .toptable {
      width: 95%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 15px;
      border: none;
      font-size: 15px;
    }

    .topcheckboxes {
      border-top: 1px solid;
      text-align: center;
      width: 100%;
    }

    body {
      width: 968px;
      font-family: 'Open Sans', sans-serif;
    }

    .header>table {
      width: 100%;
    }

    .toptable td {
      width: 50%;
      padding: 3px;
    }

    .answer-box {
      background-color: #999;
      padding: 5px;
      color: #000000;
      width: 13px;
      height: 13px;
      display: block;
    }

    .detail_table .answer-box {
      margin: 5px 0 5px 0;
    }

    .gray-back {
      background-color: #999;
      color: #000000;
      padding: 5px;
    }

    .detail_table tr td:nth-child(1),
    #second_page tr td:nth-child(1) {
      vertical-align: top;
      width: 49px;
    }

    .detail_table tr td:nth-child(2),
    #second_page tr td:nth-child(2) {
      width: 388px;
      font-size: 15px;
    }

    .detail_table tr td:nth-child(3),
    #second_page tr td:nth-child(3) {
      width: 48px;
    }

    .detail_table tr td:nth-child(4),
    #second_page tr td:nth-child(4) {
      width: 48px;
    }

    .detail_table tr td:nth-child(5),
    #second_page tr td:nth-child(5) {
      width: 48px;
    }

    .detail_table tr td:nth-child(6),
    #second_page tr td:nth-child(6) {
      width: 389px;
      font-size: 15px;
    }

    .detail_table tr td,
    .detail_table,
    #second_page,
    #second_page tr td {
      border-collapse: collapse;
      border-bottom: 1px black solid;
    }

    .detail_table tr td .checkbox,
    #second_page tr td .checkbox {
      padding-top: 2px;
      padding-bottom: 2px;
    }

    .title {
      font-weight: bold;
      font-size: 24px;
    }

    .text-middle {
      text-align: center;
    }

    .inner-answer {
      display: block;
      margin-top: -5px;
    }

    .default-top-margin {
      margin-top: 0px;
    }

    .block-div {
      display: inline-block;
    }

    .header {
      margin-left: auto;
      margin-right: auto;
      border-bottom: 1px solid;
    }

    .seal-img {
      height: 64px;
      width: 64px;
    }

    .force-inline-block {
      display: inline-block !important;
    }

    .subpage-header {
      page-break-before: always;
    }

    .cover-page-title {
      margin-top: 12pt;
      margin-bottom: 12pt;
      text-align: center;
      vertical-align: bottom;
      border-top: 1px solid;
      font-weight: bold;
      text-decoration: underline
    }

    .cover-page-subtitle {
      font-weight: bold;
      text-decoration: underline
    }

    .note {
      margin-bottom: 12pt;
    }
  </style>
</head>

<body>
  <div class="report-header">
    <div class="header">
      <table>
        <tr>
          <td><img src="LouisianaSeal.png" class="seal-img"></td>
          <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td>
            <div class="text-middle">
              <span class="title">JQWJQWJQW JQWJQW JQW JQW JQW JQW JQWJQWJQWJQW</span><br> 28485 Ejqwjqwjqw Avenue, Jqwjqw Jqwjqw, LA 70201<br> (225)555-0000 &nbsp; &nbsp; &nbsp; (225)555-0000 &nbsp; &nbsp; &nbsp; jqwjqw@jqwjqw.jqwjqw &nbsp; &nbsp; &nbsp;
              jqw.jqwjqw.jqw
            </div>
          </td>
        </tr>
      </table>
      <table>
        <tr>
          <td><strong>JQWJQWJQW JQW JQWJQWJQWJQW JQWJQWJQWJQW JQWJQW JQWJQW</strong></td>
          <td style="text-align:right"><strong>Page 1 of 4</strong></td>
        </tr>
      </table>
    </div>
    <div>
      <table class="toptable" align="center">
        <tr>
          <td><strong>License / Application #:</strong></td>
          <td>8076</td>
          <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td><strong>Inspection Date:</strong></td>
          <td>06/30/2017</td>
        </tr>
        <tr>
          <td><strong>Licensed Facility Name:</strong></td>
          <td>TEST WHOLESALE DISTRIBUTORS, INC.</td>
        </tr>
        <tr>
          <td><strong>Facility Address: &nbsp; </strong></td>
          <td>1234 Some Street</td>
          <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td><strong>Product: &nbsp; </strong></td>
          <td>LD </td>
        </tr>
        <tr>
          <td></td>
          <td>Somecity, TN 70816 </span>
          </td>
        </tr>
        <tr>
          <td><strong>Facility Contact:</strong></td>
          <td></td>
          <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td><strong>Telephone:</strong></td>
          <td></td>
        </tr>
        <tr>
          <td><strong>Date of Last Inspection:</strong></td>
          <td>05/17/2017 (#59)</span>
          </td>
          <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td><strong>Designated Responsible Party:</strong></td>
          <td>Fjqwjqwjqw Gjqwjqwjqw</td>
        </tr>
        <tr>
          <td><strong>Inspection Type:</strong></td>
          <td>Initial</td>
          <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td><strong>Inspector Assignee:</strong></td>
          <td>Ejqwjqwjqw Tjqwjqwjqw</td>
        </tr>
        <tr>
          <td><strong>Inspection Complexity:</strong></td>
          <td></td>
          <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td><strong>Expiration Date:</strong></td>
          <td>12/31/2017</td>
        </tr>

      </table>
    </div>
  </div>
  <div class="cover-page-title" style="text-align:center"></div>

  <p>&nbsp;</p>

  <p>
    <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo venenatis sapien, at rutrum elit euismod eu. Nullam aliquet ipsum at justo molestie aliquam. </strong>
  </p>

</body>

</html>

The text was updated successfully, but these errors were encountered:

simonberger · 2017-07-02T15:50:47Z

v0.8.0 brought some big changes and unfortunately in such a complex project it's unavoidable to have some drawbacks beside improvements.
I don't have an answer why exactly your PDF rendered bad now. But your html/css isn't really clean and unnecessary complicated which supports those rendering problems.

If you remove the margin left/right auto setting on the header class you recover the result of v0.7.0 as far as I noted.

bsweeney · 2017-08-03T02:34:34Z

Or if you specify a width. It looks like something about the auto-width calculation plus auto-margin calculation is causing problems.

bsweeney · 2021-06-12T01:24:53Z

Simplified example:

<div style="float: left; width: 30%; border: 1px solid red;">
  <h1>LOREM</h1>
  <div style="margin: auto;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
</div>

<div style="float: right; width: 30%; border: 1px solid red;">
  <h1>LOREM</h1>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
</div>

bsweeney · 2021-08-31T18:14:03Z

Another sample:

<div style="border: 1px solid black;"><img src="https://placekitten.com/200/200" style="display: block; width: 200px; height: 200px; margin: auto;"></div>

Mellthas · 2021-08-31T22:39:28Z

I have tracked this down: The issue is that the auto margins are not always resolved. This will result in get_margin_width reporting auto in

dompdf/src/FrameDecorator/Block.php

Lines 155 to 161 in 4c65810

    
                   $w = $frame->get_margin_width(); 
        
                   // FIXME: Why? Doesn't quite seem to be the correct thing to do, 
        
                   // but does appear to be necessary. Hack to handle wrapped white space? 
        
                   if ($w == 0 && $frame->get_node()->nodeName !== "hr" && !$frame->is_pre()) { 
        
                       return; 
        
                   }

and thus the frame will not get added to the parent's line boxes below. This results in an erroneous content height for the parent (see FrameReflower\Block::_calculate_content_height()).

Mellthas · 2021-08-31T23:12:29Z

One more sample, using an inline element:

<p style="border: 1px solid red;"><span style="margin: auto;">Test</span></p>

The width/height/margin calculations really could need some more love in general, this just fixes the most glaring holes. Fixes dompdf#1482

Mellthas · 2021-09-01T00:06:59Z

display: block on an image does not work, because the default stylesheet has and !important declaration for -dompdf-image. Specifying display: block !important results in the image not being rendered.

bsweeney · 2021-09-01T01:31:22Z

Regarding image display styling, that's correct. I believe it's partially the result of a change in how images were rendered. Originally, images were rendered as a containing element for general styling and an inner, generated element for the actual image. The container element was removed in an attempt to address some issues applying styles to the element. But that change caused the display styling issue because the rendering process only calls the image renderer if the display type of an element is -dompdf-image (ref).

I added the !important styling in the default stylesheet until that particular issue can be addressed.

Fixes #1482

* Moving the PDF version to a `const` * Remove unused import * Coding standards: Enable more PSR-2 rules Enable rules which should be uncontroversial and easy to fix. * Apply coding-standards changes to files * Travis: Also check tests dir for coding standards * Update IMagick version check logic fixes dompdf#1296 * Fix scoping issue for IMagick version check * fix Trying to access array offset on value of type null (dompdf#2227) * fix Trying to access array offset on value of type null * space * fix css selector issue * Fall back to decimals for roman numerals, if out of range Consistent with how web browsers do it. See https://en.wikipedia.org/wiki/Roman_numerals#Standard_form * Stylesheet: Rename and document `_image` method for clarity * Stylesheet: Make `resolve_url` public to reduce code duplication * FontMetrics: Fix text-width calculations when using different backends Fixes issue dompdf#2403. * FontMetrics: Use direct access for protected properties * Extend tests for resolving URLs in stylesheets Without `$sheet->set_base_path(__DIR__)`, the stylesheet location would be the location of phpunit. * Fix instantiating CPDF Adapter without Dompdf * Avoid offset error in CPDF line trasparency logic related to dompdf#2227 * Use strict comparison in CPDF transparency logic * Stylesheet: Improve return-value check * Remove temporary file created when caching an image. (dompdf#2411) * Remove temporary file created when caching an image. dompdf#2377 * move unlink() to exception catch block * Fix text-width calulation with letter spacing (dompdf#2414) * Consistent doc for `get_text_width` arguments To clear up the confusion about whether word and char spacing can be float. * CPDF: Fix text-width calulation with letter spacing The letter spacing was counted twice for every space character. * PDFLib: Fix text-width calculation with letter spacing See discussion in dompdf#2414. * Use OS-indepenent file path for unit test * BlockFrameReflower: Always resolve `auto` widths * Fix undefined variable (dompdf#2466) * Bump version to 0.8.6 * Reset version string to commit hash * Bump version to 1.0.1 * Reset version string to commit hash * Bump version to 1.0.2 * Reset version string to commit hash * Fix undefined variable * Fix indentation * Fix undefined variable * Update src/FontMetrics.php * Update src/FontMetrics.php Co-authored-by: Brian Sweeney <brian@eclecticgeek.com> * Add support for `page-break-before/-after` on table rows pr dompdf#2512: * Fix some typos * Update documentation text for `_page_break_allowed` Mainly to clear up a few unclear points that have changed. The comment about table headers does not apply anymore. * Add support for `page-break-before/-after` on table rows Caveat: `page-break-after: always` does not work if the row is the last of its table row group. I want to keep things simple now; this might be better fixed in a proper rework of the page-break-properties handling, e.g. by properly propagating the property values as per https://www.w3.org/TR/css-break-3/#break-propagation. Fixes dompdf#329 * BlockFrameReflower: Fixes to height calculations (dompdf#2511) Brings the code closer to the spec: * Always resolve `auto` heights * Apply `min-/max-height` independently of the `overflow` property value * `min-height` overrules `max-height` (swapping removed) * Prevent case exception in text renderer (dompdf#2423) In case of " auto " width is throws an error as following and breaks the PDF render. ErrorException: A non-numeric value encountered in /Path_To_Project/vendor/dompdf/dompdf/src/Renderer/Text.php:158 type casting the $width to float will prevent the ErrorException * Resolve auto margins in more cases (dompdf#2531) Fixes dompdf#1482 * Properly skip checking for page breaks on empty text nodes (dompdf#2506) Before, page breaks before empty text nodes were not allowed, but they were still checked; and as they report their line height as the space needed, they could force a page break, which then would continue to search backwards in the tree for an element that allowed a page break (even though it would fit on the current page). Based on work in dompdf#1356 Fixes dompdf#2468 * Fix table column widths after page break (dompdf#2502) Node attributes are always string, so when a table was laid out, and then a page break occurred before the table at a later point, `$colspan` and `$rowspan` would always be string values and fail the checks below, most notably the check where the minimum column width is set, so that all columns received `0` minimum width. Fixes dompdf#2395 * Add support for any inline-positioned frames in text alignment This notably adds support for inline-block. Fixes dompdf#1761 * Fix `justify` text alignment with letter spacing The old logic seemed to correct for wrong text-width calculation involving letter spacing when using the CPDF backend. With the fix in dompdf#2414 this is no longer needed. * Improve support for relative positioning * Move handling of relative positioning to after the reflow process, so that it does not affect layout. * Handle `right` and `bottom` properties plus `auto` values (except for RTL language support, which is an easy FIXME). * As a side-effet, this adds support for relative positioning on inline and inline-block elements. Fixes dompdf#516 * Fix logic error in `add_frame_to_line` function The block must check its own content-box width, not the content-box width of its containing block when placing child frames. Fixes dompdf#2476. * Apply line shift to justified lines with break * Tweak Style border/outline method color handling fixes dompdf#2367 * BlockFrameReflower: Fix handling of `100%` width The condition is wrong, as an `auto` width can resolve to more than 100% if the minimum width of the content is larger. * BlockFrameReflower: Remove swapping of `min-/max-width` Per spec, `min-width` overrules `max-width`. https://www.w3.org/TR/CSS21/visudet.html#min-max-widths * Remove erroneous ‘degenerate’ case handling in `get_min_max_width` If the frame has no children, it might still have a fixed width set. Fixes dompdf#2366 * Small code cleanups (dompdf#2547) * Clean up `get_margin_height/width` functions For simplicity, return a `float` value consistently. The `get_break_margins` method was unused. * TextReflower: Small cleanup for `get_min_max_width` Also, add type declarations to `_collapse_white_space`. * Clean up `split` method signatures Consistent argument names and more type declarations. Co-authored-by: Thomas Landauer <thomas@landauer.at> Co-authored-by: Till Berger <till@mellthas.de> Co-authored-by: Brian Sweeney <brian@eclecticgeek.com> Co-authored-by: Edwin Manuel Cerrón Angeles <xerron.angels@gmail.com> Co-authored-by: Ion Bazan <ion.bazan@gmail.com> Co-authored-by: bradbulger <1234634+bradbulger@users.noreply.github.com> Co-authored-by: Jáchym Toušek <enumag@gmail.com> Co-authored-by: Madi <mudasser.ismail@gmail.com>

bsweeney added bug On Deck labels Aug 3, 2017

bsweeney mentioned this issue Aug 31, 2017

Table content overlaps image. #1527

Closed

bsweeney mentioned this issue Oct 16, 2017

text is writing over image #1405

Closed

bsweeney changed the title ~~Document formats properly in v0.7; doesn't in 0.8~~ Trouble parsing auto margins in 0.8.x Oct 16, 2017

bsweeney mentioned this issue Jun 27, 2018

Nested Table Rendering Issue #1741

Closed

bsweeney added css layout labels Jun 27, 2018

bsweeney mentioned this issue Dec 31, 2018

Entire list is rendered on next page without page-break-inside: avoid #1651

Closed

bsweeney added this to the 1.0.4 milestone Jun 12, 2021

bsweeney removed the On Deck label Jun 12, 2021

bsweeney mentioned this issue Jun 12, 2021

Image overlaying text #2391

Closed

bsweeney changed the title ~~Trouble parsing auto margins in 0.8.x~~ Some elements with auto margins receive no height Jun 12, 2021

bsweeney mentioned this issue Aug 31, 2021

Images are not centered correctly #1949

Closed

Mellthas added a commit to Mellthas/dompdf that referenced this issue Aug 31, 2021

Resolve auto margins in more cases

9c6fa9a

The width/height/margin calculations really could need some more love in general, this just fixes the most glaring holes. Fixes dompdf#1482

Mellthas mentioned this issue Aug 31, 2021

Resolve auto margins in more cases #2531

Merged

bsweeney modified the milestones: 1.1.1, 1.1.0 Sep 1, 2021

bsweeney linked a pull request Sep 1, 2021 that will close this issue

Resolve auto margins in more cases #2531

Merged

bsweeney pushed a commit that referenced this issue Sep 1, 2021

Resolve auto margins in more cases (#2531)

a799821

Fixes #1482

bsweeney closed this as completed Sep 1, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Some elements with auto margins receive no height #1482

Some elements with auto margins receive no height #1482

jbnv commented Jun 30, 2017

simonberger commented Jul 2, 2017

bsweeney commented Aug 3, 2017

bsweeney commented Jun 12, 2021 •

edited

bsweeney commented Aug 31, 2021 •

edited

Mellthas commented Aug 31, 2021

Mellthas commented Aug 31, 2021

Mellthas commented Sep 1, 2021

bsweeney commented Sep 1, 2021 •

edited

Some elements with auto margins receive no height #1482

Some elements with auto margins receive no height #1482

Comments

jbnv commented Jun 30, 2017

simonberger commented Jul 2, 2017

bsweeney commented Aug 3, 2017

bsweeney commented Jun 12, 2021 • edited

bsweeney commented Aug 31, 2021 • edited

Mellthas commented Aug 31, 2021

Mellthas commented Aug 31, 2021

Mellthas commented Sep 1, 2021

bsweeney commented Sep 1, 2021 • edited

bsweeney commented Jun 12, 2021 •

edited

bsweeney commented Aug 31, 2021 •

edited

bsweeney commented Sep 1, 2021 •

edited