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!


  • Admin

    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?


  • Admin

    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?


Log in to reply
 

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