[Solved] How to get q-btns with same width



  • I have a simple question for which I did not find an answer in the docs or the forum:

    If I have two q-btns positioned vertically within one column, like:

                <div class="col-2">
                  <q-btn
                    label="Short label text"
                  />
                  <br />
                  <br />
                  <q-btn
                    label="Looooooong label text"
                  />
                </div>
    

    How can I achieve that those two buttons get the same width (either that both have the same, fixed width, preferably large enough to fit the longer label text on button 2, or both stretch out to the full column width)?

    I found in older Quasar docs that an early version of Quasar supported a “stretch” prop for q-btn, but I don’t find that in the current API docs.



  • @Mickey58 Hi! Just use style with % width

     <div class="row">
    
          <div class="col-md-2">
            <q-btn
              style="width: 100%;"
              label="Short label text"
            />
            <br />
            <br />
            <q-btn
              style="width: 100%;"
              label="Looooooong label text"
            />
          </div>
        </div>
    

    But don’t forget div with row class wrapper outside. Also for mobile is better to use col-xs-12 instead col-md-2



  • Wow! I was not aware of this width: x% parameter. It is not used widely in the docs. Thanks!


Log in to reply