How can I set q-drawer width?
-
I want to use the left drawer as my sidebar. And when swipe the screen to the small screen,I can set the left drawer’s width. How can I set its’ width?
Thank you! -
Enable a custom theme (http://quasar-framework.org/guide/quasar-theming.html) then set the Stylus var
$drawer-width
to the size you want. Stylus variables you can use are found here: http://quasar-framework.org/api/css-stylus-variables.html -
I am writing a survey builder App. I have a main view to put my questionnaire. A left sidemenu to put my question type. A right sidebar to put question properties. This means I need different width on my left drawer and the right drawer. Do I need rewrite a component to replace the q-drawer?
-
Or wait for v0.14 which will easily allow this from within your layout template.
-
@rstoenescu Thank you!
-
To solve my problem, I wrote the flowing code:
<div class="layout-view"> <div class="row fit"> <div class="float-left side-menu gt-sm"> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> </div> <div class="float-left fit main-view gt-sm"> ... </div> <div class="float-right property-view gt-sm"> ... </div> </div> </div>
<style lang=“stylus” type=“text/stylus”>
.side-menu
background red
width 150px.main-view
background: #bfa482.property-view
background green
width 300px
</style>I found these three div share the same scrollbar. If I want these div have their own scrollbar and the max height (including the page resized), do I need some functions such as calc in css, or quasar have other helper classes to do this?