No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How can I set q-drawer width?

    Help
    2
    6
    3633
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      keyb2004 last edited by

      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!

      1 Reply Last reply Reply Quote 0
      • rstoenescu
        rstoenescu Admin last edited by

        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

        1 Reply Last reply Reply Quote 0
        • K
          keyb2004 last edited by

          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?

          1 Reply Last reply Reply Quote 0
          • rstoenescu
            rstoenescu Admin last edited by

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

            K 1 Reply Last reply Reply Quote 0
            • K
              keyb2004 @rstoenescu last edited by

              @rstoenescu Thank you!

              1 Reply Last reply Reply Quote 0
              • K
                keyb2004 last edited by

                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?

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post