'HtmlToPdf change template design

I'm working on a simple HTML template for invoices, so the first part consists of logo at the right side and below it three columns, so HTML works very well, then I use HtmlToPdf C# library to convert this to pdf as:

            var converter = new HtmlToPdf();

            var today = DateTime.UtcNow;
            var fileName = $"test- {today}";


            var doc = converter.ConvertHtmlString(html);
            using var ms = new MemoryStream();
            ms.Position = 0;
            doc.Save(ms);

            var res = ms.ToArray();
            doc.Close();
            return File(res, "application/pdf", fileName);

So it generate the file correctly but for some reason it is not three column anymore, it make three different rows with one column each one:

enter image description here

Header snippet

#page {
  background: #ffffff;
  width: 878px;
  margin: 0 auto;
  margin-top: 40px;
  display: block;
  border: 1px solid #c4c7c7;
  padding: 40px 40px 50px 40px;
  position: relative;
  z-index: 0;
}

.header__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding-top: 20px;
}

.recipient__address {
  padding-top: 60px;
  width: 200px;
}

.shipper__address {
  padding-top: 60px;
  text-align: center;
}

.company__address {
  right: 40px;
  padding-top: 60px;
  text-align: right;
}
<body>
  <div id="page">
    <div class="header__container">

      <div>
        <p class="recipient__address">
          <strong>Ship From</strong><br /> {{ShipFromCompany}}
          <br /> {{ShipFromAddressLineOne}}
          <br /> {{ShipFromAddressLineTwo}}, {{ShipFromPostalCode}}<br /> {{ShipFromAttn}}
          <br /> {{ShipFromPhone}}
        </p>
      </div>

      <div>
        <p class="shipper__address">
          <strong>Shipper</strong><br /> {{ShipperCompany}} <br /> {{ShipperAttn}} <br /> {{ShipperAddressLineOne}} <br /> {{ShipperAddressLineTwo}}
        </p>
      </div>

      <div>
        <img src="images/company__logo.png" alt="logo" class="company__logo">
        <p class="company__address">
          <strong>Ship To</strong><br> {{ShipToCompany}}
          <br> {{ShipToAddressLineOne}}
          <br> {{ShipToAddressLineTwo}}, {{ShipToPostalCode}}<br> {{ShipToAttn}}
          <br> {{ShipToPhone}}
          <br>
        </p>
      </div>

      <div>
        <p>
          <strong>Carrier:</strong>{{ShipToCarrier}}<br />
        </p>
      </div>


      <div>
        <p>
          <strong>Due Date:</strong>{{ShipToDueDate}}<br />
        </p>
      </div>

    </div>
  </div>
</body>

How can I prevent it to create multiple rows when it converts to pdf document? Regards

c++sharphtmlcssforms


Solution 1:[1]

I found the issue, apparently the htmltopdf conversion does not support CSS grid, so I changed to simple CSS as:

 .header__container {
        padding-top:80px;

    }
    .header__container::after {
        content: "";
        display: table;
        clear: both;
    }

    .header__column {
        float: left;
        width: 33%;
    }

Now it's working

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jesus

Related Questions