No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Pagination Rows Per Page Select - Padding

    Help
    3
    4
    2061
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      lmza last edited by

      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:

      0_1500618342186_upload-b05ad69e-ae67-4943-8844-9c5d7683e87d

      Thank you.

      1 Reply Last reply Reply Quote 0
      • S
        spectrolite last edited by

        There’s a couple of helper classes to add lateral padding, called on-left and on-right, those should get you there.

        1 Reply Last reply Reply Quote 0
        • a47ae
          a47ae last edited by

          @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. 🙂

          1 Reply Last reply Reply Quote 0
          • a47ae
            a47ae last edited by

            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.

            1 Reply Last reply Reply Quote 1
            • First post
              Last post