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?
I had a same issue.
Try to use col-xs-# instead col-md-# / col-sm-#, that works for me perfectly.
You should set correct page size and take care of resolution and Bootstrap breakpoints when shrinking browser window.
From the screenshot I can see the you get mobile output when converted to PDF; that means Bootstrap has detected small page size and it adjusts style accordingly. Default Rotativa page size is A4, I think.
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
For bootstrap 3, Do the following:
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
another tags ...
</div>
For bootstrap 4, Do the following:
<div class="col-6 col-sm-6 col-md-6 col-lg-6">
another tags ...
</div>
For bootstrap4 add the following styles
.flexrow {
display: -webkit-box;
display: -webkit-flex;
display: flex !important;
}
.flexrow > div {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
Then add flexrow beside each row class in the HTML
<div class="row flexrow"> </div>
Thanks to link
Related
I'm trying to make a web page that starts with a image next to some text. I got that to work but when I try to put content under that it works on desktop but when the columns get stacked the content below covers the second column. I don't do a heap of web design so this might be a easy fix.
Here are some images:
These images are scrolled down the image fill the whole viewport.
Working on desktop
Not working when stacked
Here is my code:
index.html
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="vendors/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/css/style.css" rel="stylesheet">
<title>Name</title>
</head>
<body>
<div class="container-fluid">
<div class="row vh-100">
<div id="welcomeImg" class="col-lg-4 h-100 welcomeImg" style="background-image: url('https://via.placeholder.com/1080x1920?text=Image');">
<div class="h-100" id="mobileOverlay">
<div class='icon-scroll'></div>
</div>
</div>
<div class="col-lg-8">
<h3>text</h3>
</div>
</div>
<div>
<h1>Content</h1>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At consectetur lorem donec massa sapien faucibus et. Malesuada pellentesque elit eget gravida cum sociis. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Consequat semper viverra nam libero.</h5>
</div>
</div>
<!--Scripts-->
<!-- BootStrap -->
<script src="vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Others -->
<script src="resources\js\reactive.js"></script><!--This is just a script that hides the mobileOverlay div if the display is over a certain size. The issue still happends with this removed-->
</body>
</html>
style.css
body, html {
height: 100%;
}
.welcomeImg {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* A scroll animation by Khalil Benihoud on code pen https://codepen.io/khalilbenihoud/pen/wBJVLK */
.icon-scroll,
.icon-scroll:before {
position: absolute;
left: 50%;
}
.icon-scroll {
width: 40px;
height: 70px;
margin-left: -20px;
top: 80%;
margin-top: -35px;
box-shadow: inset 0 0 0 1px #fff;
border-radius: 25px;
}
.icon-scroll:before {
content: '';
width: 8px;
height: 8px;
background: #fff;
margin-left: -4px;
top: 8px;
border-radius: 4px;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(46px);
}
}
#keyframes scroll {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(46px);
}
}
Just take away the vh-100 class from the row and give it to the div with the id welcomeImg instead of the h-100 class. This should do the trick.
<body>
<div class="container-fluid">
<div class="row">
<div id="welcomeImg" class="col-lg-4 vh-100 welcomeImg" style="background-image: url('https://via.placeholder.com/1080x1920?text=Image');">
<div class="h-100" id="mobileOverlay">
<div class='icon-scroll'></div>
</div>
</div>
<div class="col-lg-8">
<h3>text</h3>
</div>
</div>
<div>
<h1>Content</h1>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At consectetur lorem donec massa sapien faucibus et. Malesuada pellentesque elit eget gravida cum sociis. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Consequat semper viverra nam libero.</h5>
</div>
</div>
</body>
I want my form fields to look right. However, the hint text of a first field intersects the second field below it and the text appears dirty. My goal is to separate these overlapping texts.But I haven't found a solution yet. How can I solve this problem?
I don't want the form to look like in the picture.
Edit: I'm using the method suggested on his Angular official site.
https://stackblitz.com/angular/lnkmogrbgry?file=app%2Fform-field-overview-example.ts
Edit 2:
userform.component.html
<div class="col-lg-8 mx-auto mt-5">
<mat-card class="fullbar">
<div class="card-header-bar">
New User Form!
</div>
<mat-card-content class="mt-3 card-content-bar">
<form [formGroup]="userGroup">
<mat-form-field class="full-width">
<input matInput placeholder="Username" formControlName="username">
<mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
malesuada nisi mi at lectus.
</mat-hint>
</mat-form-field>
<mat-form-field class="full-width">
<input matInput placeholder="Password" formControlName="password">
<mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
malesuada nisi mi at lectus.
</mat-hint>
</mat-form-field>
<mat-form-field class="full-width">
<input matInput placeholder="Age" formControlName="age">
<mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
malesuada nisi mi at lectus.
</mat-hint>
</mat-form-field>
</form>
</mat-card-content>
</mat-card>
</div>
userform.component.css
.fullbar {
padding: 0px;
margin: 0px;
margin-top: 75px;
margin-bottom: 225px;
}
.card-header-bar {
line-height: 50px;
height: 50px;
max-height: 50px;
vertical-align: middle;
padding-left: 15px;
color: rgba(0, 0, 0, .54);
background-color: #e7e5f7;
}
.card-content-bar {
padding: 15px;
}
.full-width {
width: 100%;
}
I guess you need to set height of mat-form-field to auto.
I found a weird issue with my fixed header under the following conditions:
iphone 6+, landscape mode
safari, at least two tabs opened
my page has a position: fixed header and a body and html with position: relative, height: 100%
After page loads and when scrolling down, all works good, the header is in place and web inspector shows it correctly:
But when you scroll up and pull the page down the screen and release, the header is still visible on the page, but actually it is shifted somewhere below the viewport (see that web inspector does not highlight it).
This fact results in all header elements being unaccessible: you cannot open the menu, click on the logo, or contact button.
The header goes back to normal when:
you scroll down (but breaks again when you scroll back up)
switch to another tab and back
or close other tabs
I tried changing DOM or/and CSS of the header and body, but nothing puts the header back to normal state.
Any thoughts on how it can be fixed?
I am sorry to be the messenger of bad news, but I have no idea what your actual problem is since you posted no actual code. However, I would guess that since your problem is position:fixed, the best way to fix it is by stopping using position:fixed as it seems to not be working for you. Here is how you can equally-smoothly emulate it using only absolute and relative positioning:
<html id="eHTML">
<style>
#eHTML { position: static }
#eBODY { position: relative; overflow:hidden }
#eHTML, #eBODY, #main { width: 100%; height: 100%; margin: 0; top: 0 }
#eBODY>div { position:absolute; left:0;bottom:0 }
#footer {height: 20%;background-color:#88f;width:calc(100% - 14px)/*to account in for 14px scrollbar*/;overflow:hidden}
#main {background-color:#ff8;width:100%;height:100%;overflow:auto}
</style>
<body id=eBODY>
<div id=main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
<p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,</p>
<p>sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,</p>
<p>vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<br /><br /><br /><br />
</div>
<div id="footer">
Some Random Fixed<br />
Content! Yay, it workz!
</div>
</body>
</html>
I am building a site with an off canvas menu just looked at it on an iphone 3 and 4 via Browser Stack but when I click on the nav trigger icon the menu isn't sliding in from the right, or should I say the main content isn't sliding to the left to reveal the menu. It's working on the 4S and above so it seems it won't work on iOS 3, 4 and 5 but does on 6 and above
I've used the auto prefixer in Brackets which added the webkit prefix but that still didn't work.
I'd greatly appreciate any help.
Here's the code:
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<div class="nav-trigger-container">
<label class="ion-navicon" for="nav-trigger"></label>
</div>
<!-- HERO BOX -->
<div class="site-wrap">
<header>
<div class="row">
<div class="hero-text-box">
<h1>Creative zest</h1>
<h2>for print & web.</h2>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper, enim in fermentum facilisis, enim sem sollicitudin leo, ut tincidunt eros dui eget felis.</p></blockquote>
<cite>Sheryn Moore » Implementation Manager » Wesleyan brand refesh</cite>
</div>
</div>
</header>
<!-- ABOUT ME -->
<section class="freelance-graphic-designer-marc-lemmon">
<div class="row">
<h2>Senior Creative Design Consultant<br/>
& UI Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non diam mollis, mollis dui nec, molestie massa. Ut consectetur tempor nunc vitae interdum. Fusce vel diam ac tortor auctor commodo non ut metus. Donec sollicitudin augue pretium, semper nisi vitae, ultrices diam. </p>
</div>
</section>
**CSS**
/* ----- Moving the nav trigger to the right when it is clicked ----- */
.nav-trigger:checked + label {
right: 220px;
}
/* ----- Moving the content wrapper to the right when menu icon is clicked ----- */
.nav-trigger:checked ~ .site-wrap {
right: 200px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
/* ----- Creating the smooth slide action ----- */
.nav-trigger + label, .site-wrap {
-webkit-transition: right 0.2s;
transition: right 0.2s;
}
Thanks in advance.
Marc
Does the transition property that you are animating "right" have a defined starting value for the 'label' and 'site-wrap' elements? When you are trying to transition the right/left properties you need to also define it's default starting value, otherwise it will default to 'auto'.
Maybe this will fix it:
.nav-trigger + label, .site-wrap {
-webkit-transition: right 0.2s;
transition: right 0.2s;
right:0;
}
i'm trying to use the animation 'bounceslide' but I'm not seeing any bounce! Any ideas - I'm pretty new to jQuery.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Accordion</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/effects.core.js"></script>
<script type="text/javascript" src="js/ui.accordion.js"></script>
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
collapsible: true,
active:false,
animated: 'bounceslide'
});
});
</script>
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
}
.demo {
width:750px;
margin: 0 auto;
}
h3+div{
background: rgba(0,0,0,.2);
padding:4px;
}
h3 {
background:#4495D1 url(alert-overlay.png) 0% 0% repeat-x;
cursor: pointer;
outline: none;
padding: 10px;
}
h3:hover {
background-color: #555;
}
h3 a {
color: white;
text-decoration: none;
}
</style>
</head>
<div class="demo">
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
</div>
</div><!-- End demo -->
It works when you select a container above the container that is expanded. I assume this is the standard behaviour.
I know this is an old question that you've probably long since figured out, but I was running into nearly this exact problem today, so I created a working example here. I removed some of your styling for width and other minor changes, but changed very little to your original work so I suspect you were running on IE which does not show animations at all. At least now if someone else comes across this question they can find a working example.