3. UI with fixed and scrollable content

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

UI with fixed and scrollable content

  • L

    Hello,

    I hope this question has not been asked before, but I searched now for some time and couldn’t find a clear answer.
    I would like to create an ons-page (or perhaps more? That’s part of the question) with fixed and scrollable content.
    The layout is basically (row by row):
    <ons-toolbar/> - fixed.
    <ons-row? ons-page? ons-carousel? /> - scrolling left / right
    <ons-row? ons-page? or something else? /> - fixed
    <ons-row? ons-page? ons-carousel? /> – scrolling up / down, not covering the rows above or below.
    <ons-bottom-toolbar /> - fixed

    The compilation guide says:
    (https://onsen.io/v2/guide/compilation.html)
    “Fixed elements can be natively implemented with position: fixed property, bypassing Onsen UI’s feature. However, this may cause too many troubles in some mobile browsers when scrolling. Therefore, separating fixed content and scrollable content in two different containers is recommended.”

    I did not understand what “container” means in this context, and how to apply that.
    I understand I have to use style=“position: fixed” (correct?), but where? In an ons-row? Or do I have to create separate pages?
    Also, my understanding is that an ons-row with a large height will scroll with the “native” webview scrolling function. Should I rather go with a carousel for the two scrollable parts of the page layout?

    I don’t need a complete code example (though I would be thankful if I get one).
    Just giving me specific instructions which ons-parts I should use where would be fine I think.
    Thanks!

    EDIT:
    Ok here is the example from components compilation as I understand it:

    <ons-page>
  <ons-toolbar></ons-toolbar>
    <div style="background-color:#666666">This content should not scroll</div>
  <div class="content">
    This content should scroll because it's in the content div
    <ons-input></ons-input>
    <div>This too</div>
  </div>
</ons-page>

    The div with “This content should not scroll” is not visible. I think it is hidden behind the content div. What I would like to do:

    1. Having the div with “This content should not scroll” fixed at the top, below the toolbar.
    2. Having the content div (or onsen components) below and scrollable. It should scroll “below” the fixed div and the toolbar.
      Is that possible? If yes, what am I doing wrong?
    0
  • L

    Ok, I think I found it:
    The distance to the top has to be set for each element/row with style=“top: XXpx” where XX would be the height of the toolbar (44px) + the height of the row + the height of all other rows in between.
    For example:
    toolbar -44px
    carousel - 44px - style="top: 44px; height: 44px"
    fixed row - 32px - style=“top: 88px; height: 32px”
    <div class=“content” style="top: 120px; >
    this part should now scroll below the fixed upper rows.
    </div>
    Hope that helps someone!

    0