Help with flexbox, not able to create a proper grid

Hello,

we have a layout which contains navbar, search area e two contents, one content is the description (content description) and the other content itself which is a list of buttons in a ion-content which is scrollable by default.

That is the layoput:

As you can see, my content description is overlaping my scrollable area. That is my HTML:

<ion-navbar *navbar>

</ion-navbar>

<ion-searchbar placeholder="Search..." hideCancelButton="true"></ion-searchbar>

<div style="border: 1px solid black; z-index: 10000">
    <p>Description</p>
    <p>Description</p>
    <p>Description</p>
</div>
<ion-content padding>
    <ion-list no-lines>
        <button ion-item *ngFor="let topic of topics" (click)="selectTopic(topic)">
            Scrollable 
        </button>
    </ion-list>
</ion-content>

And that is my CSS:

@import "../../theme/app.variables.scss";
@import "../../theme/gradient";

.topics-component {
    display: flex;
    align-items: center;

    ion-content {
        position: absolute;
        bottom: 0;
        margin-bottom: 20px;
        max-height: 400px;

        scroll-content {
            display: flex;
            justify-content: center;

            ion-list {
                max-height: 375px;
                width: 300px;
                align-self: flex-end;

                button {
                    height: 55px;
                    margin-top: 10px;

                    ion-label {
                        color: color($colors, slate);
                    }
                }
            }
        }
    }
}

The scrollable content has always to be on the top, that is why I’m using position: absolute; bottom: 0

What am I missing?

Ionic has a grid system like bootstrap - you can use <ion-row> and <ion-col> respectively to help align your content.

This article should be helpful: http://www.joshmorony.com/an-in-depth-look-at-the-grid-system-in-ionic-2/

Additionally, I think all of your page content (aside from your navbar) should be inside of the <ion-content> tag, and you should position a div within it, if you are following the ionic styling properly.

1 Like

Thak you. BNut why should I put othe things in the ion-content if it is scrollable? I don’t want the content header to scroll with my list. What could you suggest?

The following css fixed my issu:

.topics-component {
    display: flex;
    align-items: center;

    ion-content {
        display: flex;
        margin: 20px 0 20px 0;

        scroll-content {
            display: flex;
            justify-content: center;   

            ion-list {
                max-height: 450px;
                width: 300px;
                align-self: flex-end;

                button {
                    height: 55px;
                    margin-top: 10px;

                    ion-label {
                        color: color($colors, slate);
                    }
                }
            }
        }
    }
}

I think your <ion-content> container should be 100% of your view height, you should position your description content fixed to the top of that container, and then create a scrollable div below it.

something like:

.descriptionContent{
height: 20%;
}

.scrollDiv{
overflow: scroll;
height: 80%;
}

This is a very basic solution, but I think it should solve your problem if you’d like some content to be fixed to the top of the page and the area below it to scroll

you can use the ion-toolbar to add more content to top of page…

1 Like

This is a solution, but in my opinion not a good one, as the ion-content has scroll-content tag in it and as I said I don’t want to make this scrollable. Doing like you suggested I would have two scrollbars which I would have to control the overflow in css, but thank you very much, maybe I go for it, but I think the suggested solution with toolbar sounds more elegant.