Having a q-item-label expand to available width



  • 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



  • 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 -.-




Log in to reply