I'm trying to print a modal dialog in a React component. When the component that is under the modal takes up more than 1 page, the printing of the modal is duplicated for each page.
Since the div that I want to print is overlayed on other divs, I am using style-components library to set the #media print properties to only show the print target. In the page, I have the following:
const NoPrintBody = createGlobalStyle`
#media print {
html, body {
visibility: hidden;
}
}
`;
and the render contains the <NoPrintBody /> element.
Then, in the modal, I have:
const ReportContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
#media print {
visibility: visible;
}
`;
and here the modal is surrounded by the <ReportContainer> element. I've tried to set the height of the underlying content to 0px, but that did not have any affect.
Is your global style getting updated correctly? You should be able to find that css somewhere on the page.
I don't think NoPrintBody will work since it is targeting the html tag - even your modal should be a child of that.
Have you tried it without #media print ? If you can get it to look how you want it to in the browser you should be able to add it back to get it to print how you want
I got this same issue in a vue.js app.
I think the problem is because an SPA like its name say's is just a single page application. So as long as there is a component with content that can't be contained in a single page the print function will include those pages even if you aren't trying to print that component.
I fixed it by adding this to my global css file.
#media print {
html, body {
height:100%;
overflow: hidden;
}
}
This should force the print function to only pick one page.
Related
I have a website and want to generate a pdf with the print function. I need to add a footer on all pages.
Only the first page should be without the footer. I already tried the display property which doesn`t work. Do you know a solution?
This is how the footer is set:
.page-footer {
position: fixed;
bottom: 0;
}
// HTML
<footer class="page-footer">
Text for footer
</footer>```
Add another class to home page footer and hide it on print CSS. Along with page-footer class add another class home-page-footer and hide it when printing.
.home-page-footer { display: none; }
You will have to create separate print.css and set css rule for print media
print.css
#page {
/* rules as per your requirement */
size: 190mm 130mm;
margin: 0;
margin-top:10mm;
}
#media print {
.home-page-footer { display: none; }
}
You don't need to set rule for .home-page-footer class in your normal css file. or condition.
I am trying to create a printable document using CSS in my angular project.
For my print document that runs into multiple pages I need automatically to avoid printing the date and title in the header. At the same time I want to make sure that the document is printed with some margins. To achieve this I am using the approach suggested in this answer on SO. However I am not able to get the styling to apply.
My CSS Code looks like this
#media print {
#page {
size: auto;
margin: 0;
}
body {
margin: 2cm !important;
}
}
I have tried pasting this code in both the app.component.scss file as well as the styles.scss file. Both approaches don't seem to work. Any suggestions?
You need to put the following css in your styles.css file
#media print {
#page {
size: auto;
margin: 0mm; // added mm
}
body {
margin: 2cm;
}
}
And if you need component specific styling, you can add that to your component's css file as well:
#media print {
section {
color: orange;
}
}
Here is a Stackblitz example.
You can also try to print this page (https://angular-j4ab2g.stackblitz.io), and you will see that the date from the header is gone, and my custom section has orange text.
EDIT
I think the best option to remove the footer and header is to un-check the box in the print settings
Then you do not need to add the 0mm margin to the #page selector and the 2cm margin on the body selector.
I created an application using Vue.JS and Vuetify. The layout is based on the Google Contacts layout. I am using both a toolbar and a navigation drawer.
I would like to be able to print the content from the browser without printing the toolbar and nav drawer. I created the following CSS class:
#media print {
.no-print {
display: none;
}
}
I applied this class to the toolbar and nav drawer. When I try to print the page, these elements don't show up in the print preview, which is good, but the content does not stretch to the entire page. Looks like the toolbar and nav drawer space is still reserved for these elements.
How can I remove this space reservation?
Space is reserved with padding on v-content, so you'll have to add
.v-content {
padding: 0 !important;
}
to your media query.
Elaborating on Kael's answer, I added this to my my main App.vue compononent:
<style scoped>
#media print{
.v-content {
padding: 0 !important;
}
}
</style>
The following did the trick for me on the layout page.
#media print {
.v-main {
padding: 0 !important;
}
}
Can someone maybe help me with a few lines of css code?
I would like to my search section on my page:
http://www.virtual-forms.com/docs/
To look something like this:
https://docs.wedevs.com/
I'm new to CSS and Wordpress
Thanks, Davor 🤗
EDIT:
My latest try was with this:
/*Header search weDocs*/
.wedocs input[type="submit"],
.wedocs input[type="search"]
{
background-color: #fff !important;
color: #000;
width: 50%;
}
But no luck.
you should get on with applying correct CSS by inspecting the elements in your web browser (right-click element on site > Inspect) to find their correct classes. inspecting linked site virtual-forms.com shows that the whole search form has a parent form element with class="search-form wedocs-search-form", with child divs with classes "wedocs-search-input" for input, "wedocs-search-in" for dropdown and "search-submit" for submit-button.
I would put display: flex; on the parent element:
.wedocs-search-form {
display: flex;
}
use classes to style each individual element there
.wedocs-search-input { }
.wedocs-search-in { }
.search-submit { }
Using those classes should get you closer to getting the correct style to those elements. read up on the flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would use flex-grow on input to make it bigger for example. Hope this gets you along.
I have 30 buttons of different sizes and I want to set the width of all at once through CSS. But I haven't been able to get it to work right.
[insert example of failed CSS code here]
But it doesn't work. For example, the following button doesn't follow the above rule:
[insert minimal, complete HTML example here that illustrates the issue]
If you need to do this explicitly, you can simply add the !important attribute, although this will guarantee that regardless of location or source, the width property will be overridden, so be sure that you definitely want to apply that style.
button {
width: XXXpx !important;
}
EDIT
To make the above style only apply to one HTML page, as per your request, you can change the HTML for that page slightly, giving an id to your <body> tag, and then targeting buttons only when they appear below that id.
HTML
<body id="page_title">
CSS
#page_title button {
width: XXXpx !important;
}
You can create a button class in your css
.button
{
width: ____px;
}
and then in your .aspx add cssClass="button" to your ASP buttons (I assume they're asp.net controls?)
For input element
INPUT[type="submit"] {
width: XXXpx;
}
For button
BUTTON {
width: XXXpx;
}
Assuming your buttons have something unique in common (ie. they're all have the class name of "buttons"), you can just use a CSS selector to set their width property. ie.
.buttons {
width:100px;
}
There are a number of different selectors you can use to target them, and keep in mind you can have multiple classnames on each html element by putting a space between them. ie. <div class='nav button'></div> will respond to both the .nav and .button definitions.