Search code examples
cssangularionic-frameworklayoutuser-experience

Ionic: Scrollable areas with fixed areas layout

I'm having some trouble in an app I'm developing in which the client wants to have some fixed areas which contains tabs and filters, and one infinite scroll main area which contains the corresponding data which is selected on the tabs and filtered:

enter image description here

I've tried different options to accomplish this layout, and got some issues in each case:

  • Wrap all the main area (yellow + blue) in an non scrollable ion-content, make the blue area scrollable, covering the rest of the screen with flexbox. Issues: infinite scroll is not working, since it needs ion-content as the scrollable area. I have the feeling that the layout is not very solid and could act unexpectedly. Also, from the UX perspective most users are used to be able to scroll in the whole screen and not only on an area
  • Use the ion-content tag around the blue area. Issues: header and footer are misplaced
  • What I think might be the best way to go: Wrap ion-content around yellow and blue area and make yellow area floating (slot="fixed"). Issues: I don't want to set a fixed top margin in the blue area since this height may change depending on the device being used. Maybe this could be done programmatically, but I'd rather do it with just CSS

Also, maybe is possible to include the yellow area in the ion-header, but I find this very inflexible, and hard to structure. In this case, the tabs headers would be in ion-header, while the content in ion-content, which seems pretty weird from my point of view.

Any ideas in how to achieve this?

Solution

  • put the fixed content into the header itself wrapping in a ion row

    <ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>Header Title</ion-title>
    </ion-toolbar>
    <ion-row class="filter-row">
        <ion-col>
            <span>All</span>
        </ion-col>
        <ion-col>
            <span>High</span>
        </ion-col>
        <ion-col>
            <span>Medium</span>
        </ion-col>
        <ion-col>
            <span>Low</span>
        </ion-col>
        <ion-col>
            <span>No Priority</span>
        </ion-col>
    </ion-row>
</ion-header>

    If you don't want to put the tabs into header, here is the second solution you can use

    wrap the fixed tabs and other stuff you want to be fixed at the top below header into a div and add position sticky to the div with these css properties

        position: sticky;
    top: 0;
    z-index: 1;