When printing, Vuetify application reserves space for invisible elements - css

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;
}
}

Related

Word Press & Elementor: Customize Spacer size for different screen Width

I was wondering if anyone has attempted to create responsive spacers and come across the following issue.
I am trying to customize a specific spacer in my home page such that below a certain screen size (i.e width), the size of that particular spacer will be zero pixels. I am using word press and Elementor pro.
What i have tried to do is select the spacer, right click then edit spacer --> advanced --> custom css ... and i have inserted the following code however nothing seems to happen:
/* Remove spacer block */
#media screen and (max-width:740px) {
.spacer-block {
display: none !important;
}
}
I would really appreciate some help with this.
Many thanks,
MJ
I would recommend you to use margins instead of the spacer. For example:
#media screen and (min-width:741px) {
.my-element {
margin-top: 50px;
}
}
#media screen and (max-width:740px) {
.my-element {
margin-top: 0px;
}
}

I want to print a website and exclude the footer from first page

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.

Print css styles do not apply in angular project

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.

Changing logo and main menu colour on specific page

I want to change the logo and main menu in the header on this page only:
https://www.maisondefemmes.com/galentines-day/​​
I've tried updating the css and only managed to edit the search and cart colours.
I've tried using both content and background-image, as well as using logoimg bg--dark rather than #logo but to no avail.
.page-id-3055 #logo {
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
}
I want the logo and main menu to be #b50c3f but they don't budge. I've managed to change Search and Cart.
The Logo is a html img tag and you can't change it that way. The content attribute only works for pseudo elements. One solution would be the following:
.page-id-3055 .logolink > img {
display: none;
}
.page-id-3055 .logolink:before {
display: inline-bloc;
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
width: 100%;
height: 50px;
}
You can detect url with jquery and then change logo and menu by jquery css
if (window.location.href.indexOf("galentines-day") > -1) {
// do something
}

CSS and Wordpress: remove padding from element

I've built a page using Wordpress, and am now trying to modify is using CSS. I want to remove the top padding from a particular element on my page. After inspecting the culprit element (using Chrome-->Inspect Element), I see that it has a class of .content-area and a top-padding of 72px. Here is the relevant CSS info yielded by inspect element:
.content-area, .content-sidebar {
padding-top: 72px;
}
However, when I insert the following into my style.css:
.content-area{
padding-top: 0px;
}
the padding remains. Any thoughts on what I'm doing wrong, or how to resolve?
sometime time this property can be inherited by parent class so you can try to this code
.content-area, .content-sidebar {
padding-top: 72px !important;
}
Thanks all. I changed the CSS to:
#media screen and (min-width: 846px) {
.content-area {
padding-top: 5px;
}
}
and the padding disappeared. Other media queries in CSS aren't as intuitive, but at least this works for now.

Resources