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 and on-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 in TablePaginition(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 the QSelect has the no-margin class applied)

    But the cleaner solution would be if the label was wrapped in a span or div 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:
    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.

Log in to reply