How can I set q-drawer width？

keyb2004

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!

rstoenescu

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

keyb2004

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?

rstoenescu

Or wait for v0.14 which will easily allow this from within your layout template.

keyb2004

@rstoenescu Thank you!

keyb2004

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>

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

No More Posting New Topics!

How can I set q-drawer width？