[0.14] print css



  • 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



  • 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



  • I’m sure you’ve seen this


  • Admin

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



  • 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.



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



  • 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!