CODEWITHSUNDEEP
cssvue.jsvuetify.js
Rami Cohen
Rami Cohen

Reputation: 23

When printing, Vuetify application reserves space for invisible elements

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?

Upvotes: 2

Views: 1826

Answers (3)

Fawzy Mohamed
Fawzy Mohamed

Reputation: 1

The following did the trick for me on the layout page.

@media print {
    .v-main {
        padding: 0 !important;
    }
}

Upvotes: 0

kmst
kmst

Reputation: 11

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>

Upvotes: 1

Kael Watts-Deuchar
Kael Watts-Deuchar

Reputation: 4491

Space is reserved with padding on v-content, so you'll have to add 

.v-content {
  padding: 0 !important;
}

to your media query.

Upvotes: 1

Related Questions