Try freeBuy now
Try freeBuy now

HTML to PDF / DOCX / RTF Java converter library › Forums › PD4ML Forums › Technical questions / Troubleshooting › inline-block with width auto not working properly with nested elements

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • Rekha Tavvala
      January 13, 2020 at 17:25
      #33872

      Hi pd4ml,

      We have some markup where there is nested div structure and we are applying display:inline-block to the top level

      .
      Seems like inline-block with width auto is not working in case of nested structures. Please find the markup and generated PDF in attachment.

      Note : We are using pd4ml-4.0.6 jar
      Is it possible to provide a fix (or)
      Can you please suggest some css which will work with pd4ml? (In browser, the output is proper)

      Thanks,
      Rekha

      Attachments:
      You must be logged in to view attached files.
      Rekha Tavvala
        January 13, 2020 at 17:27
        #33874

        Please find the markup we are using:
        <html>

        <head>
        <style>

        .content-sub_section {
        display : inline-block;
        width : auto;

        }

        .content-field {
        width : 50%;
        display : inline-block;
        float : left;
        }

        </style>
        </head>

        <body>

        <span>100</span>

        <span>King</span>

        <span>50</span>

        <span>101</span>

        <span>Mark</span>

        <span>70</span>

        </body>

        </html>

        Rekha Tavvala
          January 13, 2020 at 17:29
          #33875

          <html>

          <head>
          <style>

          .content-sub_section {
          display : inline-block;
          width : auto;

          }

          .content-field {
          width : 50%;
          display : inline-block;
          float : left;
          }

          </style>
          </head>

          <body>

          <span>100</span>

          <span>King</span>

          <span>50</span>

          <span>101</span>

          <span>Mark</span>

          <span>70</span>

          </body>

          </html>

          Rekha Tavvala
            January 13, 2020 at 17:31
            #33876

            `<html>

            <head>
            <style>

            .content-sub_section {
            display : inline-block;
            width : auto;

            }

            .content-field {
            width : 50%;
            display : inline-block;
            float : left;
            }

            </style>
            </head>

            <body>
            <div class=’layout-content-inline’>
            <div class=’content-sub_section’>
            <div>
            <div>
            <div class=’parent’>
            <div class=’layout-content-inline_grid_double’>
            <div class=’content-field’>
            <div>
            <div>
            <span>100</span>
            </div>
            </div>
            </div>
            <div class=’content-field’>
            <div>
            <div>
            <span>King</span>
            </div>
            </div>
            </div>
            <div class=’content-field’>
            <div>
            <div>
            <span>50</span>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            <div class=’content-sub_section’>
            <div>
            <div>
            <div class=’parent’>
            <div class=’layout-content-inline_grid_double’>
            <div class=’content-field’>
            <div>
            <div>
            <span>101</span>
            </div>
            </div>
            </div>
            <div class=’content-field’>
            <div>
            <div>
            <span>Mark</span>
            </div>
            </div>
            </div>
            <div class=’content-field’>
            <div>
            <div>
            <span>70</span>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </body>

            </html>

          • Author
            Posts
          Viewing 4 posts - 1 through 4 (of 4 total)

          You must be logged in to reply to this topic.