Content-style width as % value doesn't work



  • Moved from 0.16 to latest version and width as a percentage value doesn’t work anymore?
    ’ :content-style="{width: ‘33%’}"" // used to work



  • Can you expand on where you are trying to use this a bit more please?

    Scott



  • So I am using a layout where the right drawer need to be open and have a consistent size. So we had used content-style to set the width to 33%. Once I upgraded to .17 width only seems to take pixel not % here is part of my code.

          side="right"
          v-model="rigthDrawerOpen"
          :content-style="{width: `33%`}"
          :content-class="$q.theme === 'mat' ? 'bg-grey-1' : null"
        >```


  • Do you have back ticks around 33%?

    Scott



  • Actually I tried that just before I copied it here… thinking that might work.
    By the way even use style= doesn’t work. It works with px but not %



  • Here is how it is and used to work prior to latest release.

          side="right"
          v-model="rigthDrawerOpen"
          :content-style="{width: '33%'}"
          :content-class="$q.theme === 'mat' ? 'bg-grey-1' : null"
        >```


  • I was asking about the back ticks, because it looked funny in your code above, not because it might be a solution.😄

    But, as the wise master of Quasar always says to me, “look at the source code!”

    https://github.com/quasarframework/quasar/blob/dev/src/components/layout/QLayoutDrawer.js

    The content-style prop is overridden with the width prop for the drawer’s width, which only takes a number and is translated into a pixel value. There is also a “mini-width” prop, for smaller screens too.

    So, I’d say, if you want a drawer width in percentage, that needs to be designed into the component, which I don’t think is going to happen. As I see it, it doesn’t make sense really, because in the end, your drawer content will most likely look bad or get mutilated, when the drawer size changes. Also, how does a relative 33% work on a phone screen?

    You could ask for a percent value anyway as a feature request, but I think you’ll need some really convincing arguments.

    Scott