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

[Mickey58]

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.

[nobilik]

@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

[Mickey58]

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