PD4ML v4 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
  • #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.
    #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>

    #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>

    #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>

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.