[SOLVED] How to align the q-toggles that control q-table column visibility
I’m using q-toggles to control the visibility of q-table columns. I follow the code shown in https://quasar.dev/vue-components/table#Example--Visible-columns%2C-custom-top-and-fullscreen
My q-toggle labels (which correspond to the q-table column names) are made up from text with different lengths.
The different lengths of the label texts for the toggles lead to a “wild” arrangement of those q-toggles, which doesn’t look good (and is in sharp contrast with the nice ordering of the q-table columns below the toggles). I have inserted two q-spaces between the q-toggles to group them more nicely, but that is not sufficient, as the screenshot shows:
Is there a simple way how I can arrange these q-toggles above the q-table in a tabbed format or a grid format?
The code for the full table is pretty long, its template starts like this:
<q-table title="Materialeigenschaften" dense :data="selectedNode.materialEigenschaften" :columns="tableColumnsMaterialEigenschaften" row-key="_id" :visible-columns="visibleColumnsMaterialEigenschaften" > <template v-slot:top="props"> <div class="col-2 q-table__title">Material-Eigenschaften</div> <!-- q-toggles to control q-table columns visibility start here: --> <div v-if="$q.screen.gt.xs" class="col"> <q-toggle v-model="visibleColumnsMaterialEigenschaften" val="symbol" label="Symbol" /> <!-- ...more q-toggles with different labels follow here, with 2 q-spaces in between, followed by the long rest of q-table -->
metalsadman last edited by metalsadman
@Mickey58 make a row, with even col’s i guess. but imo, is a qselect dropdown might be neater no? something like this https://0ybb3.sse.codesandbox.io/table-extensions/dynamic-sample. click “Fields”. Also in docs, https://quasar.dev/vue-components/table#Visible-columns%2C-custom-top%2C-fullscreen. You could also use qmenu with qtoggles as the items.
Thanks @metalsadman. I would like to keep the toggles and not change it to a dropdown menu.
So I would like to try your first suggestion first, put the toggles in a “row with even columns”.
But what does that mean, use a q-tr or what? And how to set the column width? A small example would be great.
metalsadman last edited by
@Mickey58 i meant a div using css flex classes to wrap your qtoggles. https://quasar.dev/layout/grid/introduction-to-flexbox https://quasar.dev/layout/grid/flex-playground
s.molinari last edited by
I’d also suggest making a dropdown multiple select menu of some sort. It would be much more elegant from a UI/ UX perspective.
Thanks, @metalsadman, now I remember I had looked at the flex box doc a while ago, but missed that those are applicable to my q-toggles.
@s-molinari - thanks, too. I found the toggles (if ordered nicely) quite intuitive, However, it is likely that the number of columns of my table will grow further - therefore I agree that a multi-select menu makes sense…
I’m traveling currently, so it will take some time to try your suggestions out. Thanks again.
s.molinari last edited by
Or a button that opens a dialog with your toggles.
As a first step, I tried a flex box as suggested by @metalsadman to align the q-toggles. Here is a code snippet that shows the concept, using class=“col-2” for each q-toggle, which means 2/12 of the available space in the row:
<div v-if="$q.screen.gt.xs" class="row full-width"> <div class="col-2"> <q-toggle v-model="visibleColumnsMaterialEigenschaften" val="schallSchutz" label="Schallschutz" /> </div>
It took me a few attempts to find out that it needs class=“full-width” to work properly.
The result has up to 6 toggles per row that are aligned nicely: