Rotativa PDF converter not rendering Flexbox correctly

Question

Using ASP.NET MVC in .NET Framework 4.8

I've been trying to render a View into a PDF. Found the Rotativa package that can do it. I've found out that it is pretty similar to wkhtmltopdf. In this case, when writing CSS Flexbox, there's certain differences.

Using this site as a reference, I've been learning about the old flexbox layout (that wkhtmltopdf uses and I saw on this thread).

I've done this razor page named Teste.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox test</title>
</head>
<body>
    <div class="container">
        <nav>
            Início Taco Menu Rascunhos Horas Direções Contato
        </nav>
        <div class="flex-column">
            <section>Flexbox é tão fácil!</section>
            <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</section>
        </div>
    </div>
</body>
</html>

And this css named Teste.css:

body {
}

.container {
    display: -webkit-flex;
    display: flex;
    border: 2px solid pink;
}

nav {
    width: 200px;
    border: 2px solid blue;
}

.flex-column {
    -webkit-flex: 1;
    flex: 1;
}

div > section {
    border: 2px solid yellow;
}

The result is correct. But when creating a PDF, it makes this. The flexbox layout isn't the same.

This is my main controller:

public ActionResult Index()
{
  return new ActionAsPdf("Teste") { FileName = "teste.pdf" };
}

public ViewResult Teste()
{
  return View();
}

Does Rotativa not support this flexbox code? Is there any other way to do it? Thanks!

Rotativa PDF converter not rendering Flexbox correctly

0 Answers0