Pagination Rows Per Page Select - Padding
-
Is there a way to increase the padding between the the label “Rows” and the Rows per page select component ?
Here is a screenshot. Using Datatable in 0.14:
Thank you.
-
There’s a couple of helper classes to add lateral padding, called
on-left
andon-right
, those should get you there. -
@spectrolite In general, you are right, but I think in the case of the
DataTable
toolbar it is not possible to apply CSS classes directly to the label or the select component because the pagination is set inTablePaginition
(source).
I think the options here would be to either apply the needed margin by using the CSS selectors, like so.q-data-table-toolbar .q-select { margin-left: 1rem !important; }
(The
!important
is needed, because theQSelect
has theno-margin
class applied)But the cleaner solution would be if the label was wrapped in a
span
ordiv
and had a specific class applied, and maybe even have the margin by default, because, in my opinion, it looks way better with a little margin applied.If I have time for this I can try to make a pull request to implement this.
-
Here is the pull request: https://github.com/quasarframework/quasar/pull/740
I set the margin to 15px, because this is half the margin that is applied to a div.
I am not really sure about the class name because I do not know which naming conventions Quasar uses for CSS.