Login/Register
Rotativa generated PDF not respecting UIkit grid
Asked Answered
gridstylingrotativagetuikit
I

0

0

I want to generate a PDF from an specified view respecting my actual CSS. 

<html>
<head>
    <meta charset="utf-8" />
    <style>
        .justify {
            text-align: justify;
            text-rendering: geometricPrecision;
        }

        .center {
            text-align: center;
        }

        body {
            font-size: 15px;
            white-space: normal;
            line-height: 110%;
            text-rendering: geometricPrecision;
        }
        .rightheader {
            font-size: 12px;
        }
        .bigger{
            font-size:18px;
        }

    </style>
    <link href="~/Content/uikit.css" rel="stylesheet" />
    <link href="~/Content/CartaSates.css" rel="stylesheet" />
    <title>

    </title>
</head>
<body style="padding:10px;">
    <div class="uk-grid" style="margin-top:10px;margin-left:0px !important;">
        <div class="uk-width-2-3" style="padding-left:0px;padding-top:0px;">
            <img src="~/src/img/logo.png" style="width:200px" />
        </div>
        <div class="uk-width-1-3 justify" style="padding-left:0px;padding-top:0px;">
            <div class="uk-grid">
                <div class="uk-width-1-4 justify rightheader" style="padding-left:0px;padding-top:0px;text-align:right">
                    <strong>Section:</strong><br />
                    <strong>Office:</strong><br />
                    <strong>Case:</strong>
                </div>
                <div class="uk-width-3-4 justify rightheader" style="padding-left:15px;padding-top:0px;">
                    <span><strong>Foreign Trade Directorate</strong></span><br />
                    <span><strong>SATES-DCE-UV-2887/2019</strong></span><br />
                    <span>Request for verification of request.</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

I already have the my HTML with CSS and it´s showed as intended, logo to the left, and text separated in two minnor divs to the right, but when the PDF is generated, it separate my divs in diferent rows.

Ill answered 9/9, 2019 at 23:38 Comment(6)
any chance the layout gets "responsive" due to the width of PDF page? – Canuck
@Canuck I am pretty sure that uikit has is own responsive media querys, any ideas how can I stick with mine and ignore the responsive ones? – Ill
the way you use uk-width is correct, so maybe the content is too big for the PDF page. I'd try setting smaller font for it and check if by any chance @print is used or not as those are specific styles typically used for printing (don't know about Rotativa, but some other frameworks use printing feature) – Canuck
@Canuck after reading about the problem it seems like the problem was that display:flex was not working at the grid, just added a CSS class at the same level as uk-grid called "flexrow" and another one for my divs. .flexrow { display: -webkit-box; display: -webkit-flex; display: flex !important; } .flexrow > div { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } – Ill
nice find! glad you were able to fix it and shared the solution! – Canuck
You are welcome @Erdogan , I'm happy the solution helped you. – Ill

© 2022 - 2024 — McMap. All rights reserved.