Search box in ion-header overlaps with ion-content

ionic-v1
1

I’m trying to add a search box in order to filter a list.

The search field should not scroll, that’s why I put it inside of the ion-header-bar.
The list that gets filtered is long so I want that to scroll, that’s why it’s inside the ion-content area.

Functionality works great, except for the fact that when I put the search box you can see on the screenshot inside the header (in order to not be part of the scrolling area), it overlaps with my list in the ion-content area.

I can put the search box inside my list in ion-content, that solves the overlapping problem, but then it scrolls with the search results and that’s what I want to avoid. Any idea how to avoid the overlap?

Thank you!

2

Have you tried to add some css like margin-top to the list?

1 Like
3

Would that be the go-to solution in this case? Feels like cheating :slight_smile:

Adding text instead of the search box moves the list down just fine like expected so there must be a better way no?

4

This is because of how has-subheader works. Right now when there’s a subheader in the view, we adjust the top value, which works okay, but if your subheader is bigger than 44px, the content gets overlapped.

In future release, we’re moving to flex box to solve this issue. But for right now, adjust the value of has-header to fit your needs or make a new class to apply to ion-content, has-big-subheader

5

Ok makes sense! Thanks for clearing this up mharington and dschniepp!