Having a q-item-label expand to available width

[mboeni]

Hey there

I’m doing a list and want to have a specific q-item-section expand to fill the available space. Consider the following code:

                              <q-list bordered>
                                <q-item clickable v-ripple>
                                  <q-item-section avatar>
                                    <q-avatar>
                                      <img :src="`https://cdn.quasar.dev/img/avatar6.jpg`">
                                    </q-avatar>
                                  </q-item-section>
                                  <q-item-section>
                                    <q-item-label>Topic Name</q-item-label>
                                  </q-item-section>
                                  <q-item-section>
                                    <q-item-label>Twitch</q-item-label>
                                    <q-item-label>Mixer</q-item-label>
                                    <q-item-label>YouTube</q-item-label>
                                  </q-item-section>
                                  <q-item-section>
                                    <q-item-label>Description goes here...</q-item-label>
                                  </q-item-section>
                                  <q-item-section>
                                    <q-item-label>External Link 1</q-item-label>
                                  </q-item-section>
                                  <q-item-section>
                                    <q-item-label>External Link 2</q-item-label>
                                  </q-item-section>
                                </q-item>
                              </q-list>

I would like to have the q-item-label that holds the description use as much space horizontally as available (i.e. expand). What is the correct way to achieve this?

Cheers,
Michael

[mboeni]

Follow up: would wrapping the q-item-label in a <div> be the correct way of spacing the labels? I’m not really able to get this working right now -.-

[jraez]

You may give a try to .col-auto css class.

https://quasar.dev/layout/grid/introduction-to-flexbox#Managing-Children