Monaca Onsen UI Discord Chat Github Repo

position:sticky on ons-list-item



  • Hi, is it possible to use the position sticky css attribute within a onsen list item? So that the onsen list item stays on top of the screen when scrolling?

    <ons-list-item style="position:sticky; top:0px"></ons-list-item>
    

    The code above is obviously not working. Nor any similar configuration. I realized that this is not working within an ons-list.

    Rgds


  • administrators

    I think the problem is that sticky elements work relative to their containing element, and a list item’s containing element is the list. The list and the list item always scroll together so the list item never reaches the bounds of the list.

    That’s a starting point. Perhaps someone with more CSS wizardry than me knows how to change the containing element to the page instead of the list?


  • administrators

    Here’s a hacky way to do sticky list headers. That might help you get to sticky list items.

    It works because the header is outside the list, so its containing element is the page, not the list.

    https://codepen.io/anon/pen/NJpXZJ

    <style>
      .sticky {
        position: sticky;
        top: 0px;
        z-index: 9999;
        background-image: none;
      }
    </style>
    <ons-page>
      <ons-toolbar>
        <div class="center">Lists</div>
      </ons-toolbar>
    
      <ons-list-header class="sticky">header</ons-list-header>
      <ons-list>
        <ons-list-item>Item A</ons-list-item>
        <ons-list-item>Item B</ons-list-item>
        <ons-list-item>Item C</ons-list-item>
      </ons-list>
      
      <ons-list-header class="sticky">header</ons-list-header>
      <ons-list>
        <ons-list-item>Item A</ons-list-item>
        <ons-list-item>Item B</ons-list-item>
        <ons-list-item>Item C</ons-list-item>
      </ons-list>
      
      <ons-list-header class="sticky">header</ons-list-header>
      <ons-list>
        <ons-list-item>Item A</ons-list-item>
        <ons-list-item>Item B</ons-list-item>
        <ons-list-item>Item C</ons-list-item>
      </ons-list>
      
      <ons-list-header class="sticky">header</ons-list-header>
      <ons-list>
        <ons-list-item>Item A</ons-list-item>
        <ons-list-item>Item B</ons-list-item>
        <ons-list-item>Item C</ons-list-item>
      </ons-list>
    
      <ons-list-header class="sticky">header</ons-list-header>
      <ons-list>
        <ons-list-item>Item A</ons-list-item>
        <ons-list-item>Item B</ons-list-item>
        <ons-list-item>Item C</ons-list-item>
      </ons-list>
    
      <ons-list-header class="sticky">header</ons-list-header>
      <ons-list>
        <ons-list-item>Item A</ons-list-item>
        <ons-list-item>Item B</ons-list-item>
        <ons-list-item>Item C</ons-list-item>
      </ons-list>
    </ons-page>
    


  • This is working indeed, thank you .-) i Can go with that