I’m working on a simple demo app to show what is possible with ionic and to learn it. First I couldn’t figure out how with the side-menu app to replace the header, is that possible? Second to get around that I created a separate HTML file copied from the sidemenu demo index. I figured from the blank app that an ion-pane is required, but my headers and footers are overlapping with the top and bottom of my content.
I’ve tried placing the headers inside and outside of the ion-pane and removing it altogether but I can’t get it to work. Is there a way to keep this from happening? Do I need to add padding? How to I make sure that will look good on multiple devices?
<body> <ion-pane> <div class="bar bar-header bar-stable"> <h1 class="title">Header (stable)</h1> </div> <ion-content> <!-- several paragraphs from project gutenburt to check out the scrolling --> </ion-content> <div class="bar bar-footer bar-royal"> <button class="button button-clear">Left</button> <h2 class="title">Footer (royal)</h1> <button class="button button-clear">Right</button> </div> </ion-pane> </body>