I'm having a problem with properly formatting my bootstrap panels for printing. The charts being contained within the bootstrap panels overrun the panel border on the right side (only when I print though, everything looks fine on the actual web page) and the charts get split by page breaks. I've tried using print media queries and using page-break-inside and page-break-after but nothing is working (I could be doing it wrong though).
Here is my code utilizing the bootstrap panels. I'm also using Font Awesome for some interactive buttons and I'm using canvasJS for my charts.
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Work Orders by Priority
<a data-toggle="collapse" data-target="#collapse1">
<span class="fa fa-line-chart pull-right panelColBtn rotate"/>
</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div>
<div id="chartContainer1" style="height: 450px; width: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">% of Work Requests with Repair Tags
<a data-toggle="collapse" data-target="#collapse2">
<span class="fa fa-line-chart pull-right panelColBtn rotate"/>
</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel-body">
<div>
<div id="chartContainer2" style="height: 450px; width: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is what I had tried for my print media query to attempt to resolve the page break issue.
#media print {
div.panel, div.panel-primary {
page-break-inside: avoid !important;
page-break-after: auto !important;
}
}
I checked out this thread before coming here and followed along with it but it seems that the original poster was never able to get it working correctly either.
Printing Twitter Bootstrap correctly
Can anyone shed some light on to how this issue could be resolved?
Related
So I've tried a few of the solutions provided here (and elsewhere on the web) to see if I could break out of the bootstrap container, but I'm not having any luck. To describe it, I have a .fluid-container to put a full-width background behind a normal .container. Where things get tricky is that I need the first column in .container to break out and extend all the way to the left edge of the screen.
What it should look like:
What I've gotten it to do:
Here's my HTML:
<div class="container-fluid bg-darkblue bg-image-footer py-5">
<div class="container">
<div class="row" id="footer-content">
<div class="col-5 px-0 py-3 bg-limegreen">
Form content goes here.
</div>
<div class="col-1"> </div>
<div class="col-2 text-white">
<p class="avenir text-limegreen text-upper">Contact Us</p>
<p>(202) 555-1212</p>
<p>email#email.com</p>
<p>New York, NY</p>
</div>
<div class="col-2">
<p class="avenir text-limegreen text-upper">Client Name</p>
<p>About</p>
<p>Careers</p>
<p>Accessibility</p>
</div>
<div class="col-2">
<p class="avenir text-limegreen text-upper">Social</p>
</div>
</div>
</div>
</div>
To reiterate -- the goal here is to move the left edge of the lime green box all the way to the left edge of the screen, without moving the right edge out of the grid system or screwing with the rest of the layout.
All CSS is straightforward Bootstrap 5, with the exception of a few things to control color like .bg-limegreen.
Bootstrap layouts should never have immediately-nested containers. Instead, use standard row/column nesting. Avoid trying to "break out" of anything unless you actually need overlap across columns. That's rarely the case.
Also note that I replaced some of your custom classes with existing Bootstrap classes (text-light and text-uppercase). You'd be wise to get to know what Bootstrap offers very well to avoid building redundant CSS technical debt. See Bootstrap's text utilities.
I'd also encourage you to override Bootstrap's semantically-named classes for color rather than creating new, non-semantic ones. For example, text-limegreen might instead be an override of text-success, even if just for the footer. Have a look at Bootstrap's color utilities.
.bg-darkblue {
background: darkblue;
}
.bg-limegreen {
background: limegreen;
}
.text-limegreen {
color: limegreen;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid bg-darkblue bg-image-footer py-5">
<div class="row" id="footer-content">
<div class="col-5 px-0 py-3 bg-limegreen">
<div class="row justify-content-end">
<div class="col-8 text-light">
Form content goes here.
</div>
</div>
</div>
<div class="col-1"></div>
<div class="col-6">
<div class="row justify-content-start text-light pt-2">
<div class="col-3">
<p class="avenir text-limegreen text-uppercase">Contact Us</p>
<p>(202) 555-1212</p>
<p>email#email.com</p>
<p>New York, NY</p>
</div>
<div class="col-3">
<p class="avenir text-limegreen text-uppercase">Client Name</p>
<p>About</p>
<p>Careers</p>
<p>Accessibility</p>
</div>
<div class="col-3">
<p class="avenir text-limegreen text-uppercase">Social</p>
</div>
</div>
</div>
</div>
Using bootstrap 4 inside Vue.js, I'd like to make left and right arrows to appear at the middle of the page around the image.
Here is the code:
<div class="row">
<div class="col-1">
<span class="align-self-center"><h1>❮</h1></span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="align-self-center"><h1>❯</h1></span>
</div>
</div>
But whatever I tamper with CSS, I can not acheive this. How can I fix this?
Well, thanks to this answer, I realized it can be done with minimal fuss, by adding a simple flex css:
.img-box {
display: flex;
align-items:center;
}
And don't forget to add img-box class:
<div class="row img-box">
<div class="col-1">
<span class="nav-arrow">❮</span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="nav-arrow">❯</span>
</div>
</div>
I found this code where it can turn the cornes flat. It works well and all, but it turns everything straight. How do i just limit this to the accordion only. Ive try giving it an ID and applying to just that but it stops working when i do that. Can someone tell me the correct way. Thanks in advance!
* {
border-radius: 0 !important;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div>
</div>
you need to specify the target elements. For example:
#accordion, #accordion * {
border-radius: 0 !important;
}
The above code will apply the css rule to the accordion and all of it's children.
On a slightly different note, I'm not sure exactly why you're using !important in this instance.
Here is my problem. As you can see here they have used panel panel-primary, panel panel-green, panel panel-yellow and panel panel-red for the small panel views.
When I use panel panel-primary it is working just fine. But when I use other options, I get weird paled transparent colors. I tried panel panel-warning, panel panel-success and panel panel-danger as well but still the same. Only primary works. Any ideas?
I have 4 of these, exactly same with different text.
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="glyphicon glyphicon-stats" style="font-size:50px;"></i>
</div>
<div class="col-xs-9 text-right">
<div class=></div>
<div><h3>Statistics</h3></div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Show statistics</span>
<span class="pull-right"><i class="glyphicon glyphicon-arrow-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
The other panels except the primary one are not from bootstrap's css. I think they are user written.
Create your own class in your css file.
For example:
.panel-red{
background-color:#D9534F;
}
here is a jsfiddle
http://jsfiddle.net/borka/khaunb3q/
I have some center navigation that has always need to be in center, but that is not problem, the problem i have with some element that has to be always right of that element, how to add that this is what i have for now, it goes in accordian head
Here is boostrap 3 code
<div class="panel-heading">
<h4 class="panel-title text-right">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Click Me
</a>
</h4>
</div>
What i need is something like this
The problem is that i dont know how many icons i would have, and they have always need to be at center of panel, and click me need to be at right?
If you want to achieve something like this, it is not very complicated. All you have to do is to set a default bootstrap accordion and set text-center insted of text-right. In this way if you place your icons they will be always aligned to center and after that you will use a <p style="float: right;">Click Me</p> in order to place your Click Me text in the right.
Here is the code:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-center">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<img src="http://placehold.it/15x15">
<img src="http://placehold.it/15x15">
<img src="http://placehold.it/15x15">
<p style="float: right">Click me</p>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
DEMO TEXT HERE.
</div>
</div>
</div>
</div>
As you can see, i used 3 icons in this example, but you can add as many as you want and they all will be center aligned.