How can I print specific pages from my website using the Foundation 5 CSS framework? In my CSS, I have included the following code:
@media print {
hr.page-break{page-break-after:always!important;}
}
I tried using the .page-break class to insert page breaks for printing, but it did not work as expected. When I removed all Foundation 5 styles, the new pages printed correctly. Any suggestions on why this might be happening?
Print styles for F5 can be found in the
/foundation/components/_type.scsshr tag.
@media print {
* {
background: transparent !important;
color: #000 !important; /* Printing in black is faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited { text-decoration: underline;}
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
// Links not displayed for images or internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after { content: ""; }
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead { display: table-header-group; /* h5bp.com/t */ }
tr,
img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 { page-break-after: avoid; }
.hide-on-print { display: none !important; }
.print-only { display: block !important; }
.hide-for-print { display: none !important; }
.show-for-print { display: inherit !important; }
}
In addition - while it may not seem significant, I have never come across a select with !important directly attached to a value without a space in between, so it might be advisable to add a space there.
After some experimentation, I have discovered that:
.columns {
float:left;
}
tends to negate the effects of page-break-* properties. If your elements are contained within a parent element designated with the class .columns, this is likely causing the issue.
An easy solution to address this is by eliminating the float property at a higher level element, such as:
@media print {
div.columns {
float:none;
}
}
I came across this discussion while seeking a more targeted approach to achieve the same result. However, implementing this change might alter the appearance of your page layout.
I'm facing an issue with the layout of my page. In this example (http://jsfiddle.net/RR2Xc/2/), the footer is not positioned at the bottom as desired. If I force the footer to be at the bottom, it creates a gap between the sidebar and footer where the ...
I am working on a navigation menu with four buttons and a section that contains four additional sections. The functionality I am trying to achieve is that when a navigation button is clicked, a corresponding section slides out while the previous one slides ...
I am looking to rearrange the order of some items on my page using JS or CSS. The project I am working on is written with ReactJS. Here is the basic structure: <div class="parent"> <form> <div class="header"></di ...
I need help with positioning an input and a textarea inside a container that has a height of 52.5vh. I want the textarea to start right below the input and expand all the way to the end of the container. How can I achieve this layout? Both elements should ...
Here is the URL for an image I am working with: URL: Currently, I am having an issue in my CSS: background: url(http://www.andrearosseti.cl/image/cache/data/New%20Coleccion/Planas/SWEET-5-TAUPE-(1)-340x340.jpg) The problem arises due to the presence of ...
I have a progress bar on my page with three parts: progress-bar-success, progress-bar-warning, and progress-bar-danger. I would like each part of the progress bar to complete sequentially, starting with progress-bar-success, then progress-bar-warning, and ...
I am currently handling a project involving a Spring Controller and JSP. Within a JSP page, I have included a button labeled Process. Upon clicking this button, two radio buttons are displayed below it along with a Submit button. After tapping the Submit ...
Is there a way to implement multiple columns in a dropdown menu using the grid system in Bootstrap 4? Here is the code I have tried so far, but it's not working as expected (please note that the snippet is mobile-responsive) <!DOCTYPE html> ...
How can I use display:inline-block in CSS to center my navigation bar? nav { position: fixed; width: 100%; } nav ul { width: 100%; margin: auto; } nav ul li { display: inline-block; margin: 5px 20px 5px 20px; text-align: center; } ...
I am facing an issue with centering an h1 header within a .banner element. When I try to apply margin to the header, it appears to indent not from the top border of the banner, but rather from the nav element located above the banner. After inspecting the ...
Currently, I am working on creating an animation that gives the illusion of a div sinking backward and then being pushed to the left once it has finished falling back. Although I am using CSS3 for this project, I am not very familiar with the animation pr ...
I am currently working on a sidebar menu with a button that toggles its visibility. However, I am struggling to implement a sliding animation from the left when the sidebar appears, and a slide back to the right when it closes. This is what my code looks ...
Is there a way to fade in an image based on the percentage scrolled, rather than a set number of pixels? I want my website to be responsive and adjust to all screen resolutions. Or perhaps is there a method to have the image fade in when it enters the fiel ...
I'm encountering an issue while trying to solve this particular challenge: My goal is to integrate a login box onto a full-screen image. Although I've come across numerous methods for incorporating an image into a form field, my task requires me ...
My website's owl-carousel is currently too tall, exceeding the full screen size. I've explored adjusting the height using the demo provided by owl-carousel for displaying one image per slide and utilizing the latest version of owl carousel 2. Try ...
Alright, I'm facing a little issue here (it seems simple, but I just can't seem to crack it)... Let me paint the picture with a snippet of HTML code below: <!-- New Website #1 --> <!DOCTYPE html> <html style='min-height:0px; ...
Looking for some help with TB3 here. I've created a jsFiddle to showcase my attempt at building a small minitron, which is essentially a mini jumbotron. https://i.sstatic.net/VxruB.png The idea is to have each 'minitron' contained within a ...
I have observed that flex can easily align input tags, regular text, and other elements perfectly on a single line with the flex-direction:row; property. However, this alignment seems to get disrupted when one of the elements is a div. For example: <ht ...
When I try to embed this css component in the html page of my website, it only appears when its size is too large. I want to resize it and make it smaller overall, but instead, it crops. I'm not sure if I am embedding this thing the wrong way or if th ...
Can you help me figure out how to make clickable areas on my HTML5 web page without them overlapping? Here's what I'm trying to do: I want the red, blue, and green areas to be clickable links, but not overlap. For example, when clicking on the f ...