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

    How to create a scrollable mini list?

    Help
    list scroll
    2
    3
    2807
    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.
    • Martin
      Martin last edited by Martin

      Has anyone already tried to build a scrollable list inside a quasar-layout?

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

        cool, found it.

        Quasar has a nice helper class “scroll” 🙂
        http://quasar-framework.org/api/css-other-helper-classes.html

        <div  style="height:150px" class="list scroll">
              <item v-for="item in ItemList">...</item>
        </div>
        
        1 Reply Last reply Reply Quote 0
        • rstoenescu
          rstoenescu Admin last edited by rstoenescu

          Aah, I like you are careful at details! The “scroll” CSS class only applies some CSS tweaks to make scrolling smooth on ALL platforms. But it doesn’t make the container scrollable. You have to add some additional CSS like overflow-y: auto besides setting that height and it will work.

          EDIT: I’m talking wrong. scroll also adds overflow CSS to your container. So it should work as is!

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