htmlcsstailwind-csswkhtmltopdfwkhtmltoimage

How do i set a width: max-content in pdf wktmltopdf

I have a dynamic index inside my pdf which has the following design
Design here The first 2 rows are fine they come next to eachother but the last row wont be placed inline

But when i try to add width: max content on the left text so it will all be inline it wont work, i researched arround and found out that max-content does not work in pdf, not setting the width at all did not work either, how do i make it so it will be all inline

the html that i am using is:

<div class="relative w-full clear">
    <p class="bg-blue relative float-left pr-10px z-20">{{ $product->name }}</p>
    <p class="bg-blue relative float-right -mr-10px pl-10px z-20" style="width: 100px">PAGE 12 / 13</p>
    <hr class="z-10 absolute w-full">
</div>
Solution

  • The hard part was trying to keep using the float approach while still having the <hr> in the middle of the two ends.

    I did an effort trying to keep it as close as possible to what you already had instead of moving to the far superior Flexbox approach because I can't say how far some css standards work correctly with wkhtml2pdf.

    So what I did here?

    First of all I added a .clearfix class that replaces your clear one among the classes to which each line belongs to. Such custom class better styles each line on its own resetting the floating criteria.

    Plus: I also added a top coord to the <hr> so that it places vertically in the middle of the line; and set the white background to the left and right parts so that they will hide underneath the line walking between the two ends.

    .clearfix::after {
  content: "";
  display: table;
  clear: both;
}
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

<div class="relative w-full clearfix">
  <p class="relative float-left pr-2.5 z-20 bg-white">Rectangular tabletop</p>
  <p class="relative float-right pl-2.5 z-20 bg-white">PAGE 12 / 13</p>  
  <hr class="w-full absolute z-10 top-1/2">
</div>

<div class="relative w-full clearfix">
  <p class="relative float-left pr-2.5 z-20 bg-white">Tabletop packaging</p>
  <p class="relative float-right pl-2.5 z-20 bg-white">PAGE 12 / 13</p>  
  <hr class="w-full absolute z-10 top-1/2">
</div>

<div class="relative w-full clearfix">
  <p class="relative float-left pr-2.5 z-20 bg-white">Connecting plate set</p>
  <p class="relative float-right pl-2.5 z-20 bg-white">PAGE 12 / 13</p>  
  <hr class="w-full absolute z-10 top-1/2">
</div>

<div class="relative w-full clearfix">
  <p class="relative float-left pr-2.5 z-20 bg-white">Incredibly long content expected not to word wrap</p>
  <p class="relative float-right pl-2.5 z-20 bg-white">PAGE 12 / 13</p>  
  <hr class="w-full absolute z-10 top-1/2">
</div>