[Feature Request] Support flex 'gap' property when converting HTML to PDF

Aspose.PDF Product Family
1

I tried to convert my HTML to PDF. One of my HTML elements has the following CSS property.

.container {
  display: flex;
  gap: 20px;
}

After I got the PDF, the gap was missing.

2

@diyuan
You could provide the code snippet used and the html file for which it manifests itself (some synthetic one with a couple of lines of content would be convenient).

3

The HTML code is like:

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            box-sizing: border-box;
        }

        .flex-container {
            display: flex;
            flex-wrap: wrap;
            font-size: 30px;
            text-align: center;
            gap: 70px;
            width: 200px;
        }

        .flex-item-left {
            background-color: #f1f1f1;
            padding: 10px;
            width: 30px;
        }

        .flex-item-right {
            background-color: dodgerblue;
            padding: 10px;
            width: 30px;
        }
    </style>
</head>
<body>

<div class="flex-container">
    <div class="flex-item-left">1</div>
    <div class="flex-item-right">2</div>
</div>

</body>
</html>

And I use the following code to convert the HTML to PDF:

var document = new Document(htmlPath, new HtmlLoadOptions());
document.Save(pdfPath);

There should be a 70px gap between the two elements. But it’s not.

4

@diyuan
thanks for the provided data - the error was reproduced and I will set the task to the development team.

5

@diyuan
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): PDFNET-55253

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

1 Like