Moving <ion-content> to top of display?

Ionic Framework ionic-v3
1

Hey everyone - im trying to render the ion-content so that it starts at the top of my page. I don’t have a header and there’s a lot of wasted space causing the user to scroll unnecessarily. I removed the ion-header tags and it didn’t seem to change anything…

<ion-header>
</ion-header

<ion-content padding>
<p>CONTENT HERE</p>
</ion-content>

Well I hoped and when I did a bulk removal of the and and re-built and ran my app it would move the content up but I had no such luck (it renders as though I have a few line break tags at the beginning of my content).

Is there something I need to add to my tag to have my text start at the very top of the page, just below the nav bar? I want to maximize usable space without requiring the user to scroll up and down.

Thanks!

Edit: Here’s what the default page looks like when it loads:

54 PM
Simulator Screen Shot Jul 28, 2560 BE, 3.26.54 PM.png1136×640 54.4 KB

And here’s what I want it to look like (shifted up):

01 PM
Simulator Screen Shot Jul 28, 2560 BE, 3.27.01 PM.png1136×640 53.9 KB

4

How should navigation work in this app?

Did you use the browser’s dev tools to see what is “there” taking up space? Or is the <ion-content> just moved down by a margin-top maybe?

1 Like
5

Navigation is done by swipes and the toolbar at the bottom of each page. I didn’t consider a margin top that might be interfering or using my browser dev tools.

I’ll look in to both options and I’m sure that I’ll be able to track down the solution. Thanks for pointing me in the right direction!

6

Ah, my brain filtered the bottom toolbar out as the Android hardware button thingie :wink: Too late…

1 Like