[0.14] print css

loop

Hello,

I’m using quasar 0.14 inside of a rails app. Using quasar-mat css, tried printing, first results are pretty horrible; I use some pretty standard:

@media print {
  div {
    border: 1px solid grey;
  }
  header,
  footer {
    display:none;
  }
  body {
    overflow: auto;
    height: auto;
  }
  .scroll-y {
     height: auto;
     overflow: visible;
  }
  aside {
    display: none !important;
  }
}

but it comes out at 500 pages (they’re 3 at most), i don’t get any flex styled two column layout (I don’t get any layout at all actually, components come out squeezed and line-print styled) and got some stray textareas at page number 200+

Any suggestions on sensible print css?

Thanks

loop

Sorry, the “all divs with border” bit was for getting an idea of what was taking up 500+ pages; It seems to be all sort of stuff, some of which has to do with q-layout itself

benoitranque

I’m sure you’ve seen this

rstoenescu

@loop Hi, you can use the Print related Quasar CSS classes. Apply them on the elements that you want to hide while printing.

loop

Hello,

Thanks for the suggestions. I hadn’t actually seen the printing related classes… cool, but still they don’t seem to solve my problem, being the fact that i get lots of nested divs spanning many pages. Possibly this is due to me trying to straight out print a SPA made with a q-layout with two levels of tabs and tonnes of form controls. I’m trying to make simpler display-only components and it’s looking a lot better.

a47ae

Could you provide an example in JSFiddle?
Because I can not really reproduce this.

loop

Sorry about the delay. Should anyone have the same issues using rails with webpacker and quasar, check that your layout says:

<%= stylesheet_pack_tag 'application', media: 'all' %>

rather than:

<%= stylesheet_pack_tag 'application' %>

If that is so, print css aren’t loaded!

No More Posting New Topics!

[0.14] print css