Menu
I am working on an ASP.NET MVC 5 project and using Rotativa to generate PDF documents from Razor views.
I can't seem to get Rotativa to render the the view properly using Bootstrap styling. I'm trying to style the view using the simple grid layout that Bootstrap does so well. Nothing too fancy.
Here is a screenshot of my Razor View:
Here is a screen shot of the PDF:
And here is my view's content:
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
Has any one else been able to get this working?
990
I had a same issue. Try to use col-xs-# instead col-md-# / col-sm-#, that works for me perfectly.
114
I have found a workaround here. After html
<div class="row printDetails">
<div class="col-5" style="background-color:lavender;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-6" style="background-color:lavenderblush;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
you should make a css class to display inline block. So in your case:
.printDetails > div {
display: inline-block;
}
Also notice the row amount is 5 and 6 or 5 and 5 depending on the page size, some of the width goes for pdf size margin which is weird why it doesn't get the exact size as mobile version which is taking Rotativa.
Hope it helps someone.
Update
As @Erdogan replied, and after checking his link I tested the code that he probably thought I have to check.. I'm referencing here the code:
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;
}
Got this: Here in some of the comments
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
