Help with flexbox, not able to create a proper grid


#1

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?


#2

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.


#3

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);
                    }
                }
            }
        }
    }
}

#4

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


#5

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


#6

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.