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
