Flex CSS XXL size?



  • Hiya!
    Wondering if we could have an xxl flex size which could be around 1500px?
    I want to specify a specific grid size that works nicely on full hd+ displays (in my case, xl isn’t enough).
    If not, is there an easy CSS workaround for this?



  • @Nicholas I have the same need.



  • @leon
    Created a workaround for now. Add the following to your quasar.variables.styl file:

    @media (min-width: 1500px) {
      .col-xxl {
        max-width: 100%;
        flex-basis: 0;
        flex-grow: 1;
      }
      .col-xxl-auto {
        width: auto;
        flex: 0 0 auto;
      }
      .col-xxl-1 {
        flex: 0 0 8.3333%;
      }
      .row > .col-xxl-1 {
        max-width: 8.3333%;
      }
      .offset-xxl-1 {
        margin-left: 8.3333%;
      }
      .col-xxl-2 {
        flex: 0 0 16.6667%;
      }
      .row > .col-xxl-2 {
        max-width: 16.6667%;
      }
      .offset-xxl-2 {
        margin-left: 16.6667%;
      }
      .col-xxl-3 {
        flex: 0 0 25%;
      }
      .row > .col-xxl-3 {
        max-width: 25%;
      }
      .offset-xxl-3 {
        margin-left: 25%;
      }
      .col-xxl-4 {
        flex: 0 0 33.3333%;
      }
      .row > .col-xxl-4 {
        max-width: 33.3333%;
      }
      .offset-xxl-4 {
        margin-left: 33.3333%;
      }
      .col-xxl-5 {
        flex: 0 0 41.6667%;
      }
      .row > .col-xxl-5 {
        max-width: 41.6667%;
      }
      .offset-xxl-5 {
        margin-left: 41.6667%;
      }
      .col-xxl-6 {
        flex: 0 0 50%;
      }
      .row > .col-xxl-6 {
        max-width: 50%;
      }
      .offset-xxl-6 {
        margin-left: 50%;
      }
      .col-xxl-7 {
        flex: 0 0 58.3333%;
      }
      .row > .col-xxl-7 {
        max-width: 58.3333%;
      }
      .offset-xxl-7 {
        margin-left: 58.3333%;
      }
      .col-xxl-8 {
        flex: 0 0 66.6667%;
      }
      .row > .col-xxl-8 {
        max-width: 66.6667%;
      }
      .offset-xxl-8 {
        margin-left: 66.6667%;
      }
      .col-xxl-9 {
        flex: 0 0 75%;
      }
      .row > .col-xxl-9 {
        max-width: 75%;
      }
      .offset-xxl-9 {
        margin-left: 75%;
      }
      .col-xxl-10 {
        flex: 0 0 83.3333%;
      }
      .row > .col-xxl-10 {
        max-width: 83.3333%;
      }
      .offset-xxl-10 {
        margin-left: 83.3333%;
      }
      .col-xxl-11 {
        flex: 0 0 91.6667%;
      }
      .row > .col-xxl-11 {
        max-width: 91.6667%;
      }
      .offset-xxl-11 {
        margin-left: 91.6667%;
      }
      .col-xxl-12 {
        flex: 0 0 100%;
      }
      .row > .col-xxl-12 {
        max-width: 100%;
      }
      .offset-xxl-12 {
        margin-left: 100%;
      }
    }
    


  • Does this follow the same pattern as the other quasar sizing classes? If so could you make a PR? Thanks!



  • @benoitranque I took the xl style from quasar and basically just made it 1500px and modified all the class names to xxl.
    So it should follow the other sizing classes.



  • @Nicholas Very nice man. Tks a lot \o/\o/\o/\o/\o/\o/\o/\o/\o/\o/\o/\o/\o/


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.