Getting rid of ion-view title


#1

Hey guys,

I am using the “tabs” startup template. Is there a way that I can get rid of the ion-view title at the top of each page? I am doing a display: none on .bar-header and I can get it to disappear, but I want all of my content to be pushed to the top of the page as well. Is this possible?

Thanks!


#2

If you look at your DOM, you’ll see that your content probably has this style applied to i:

.has-header {
  top: 44px;
}

Try overriding that.


#3

Take out the <ion-nav-bar> if you don’t want the header, then <ion-content> will automatically fill the whole screen from the top to bottom.


#4

I took out ion-nav-view on all of my tab.html pages. That moved the content right up to the top. Now I am having an issue with inserting a “back” button.

  1. Does anyone know how I can navigate between pages (that are not in the tabs at the bottom of my app) by swiping?

  2. Can I put a back button anywhere in a page without having the ion-nav-view?

Thanks!


#5

I’m not sure, I don’t think any of the current components can do this for you. You probably have to build this component yourself.

You can’t use the ionBackButton without ionNavBar and ionNavView. You can make your own back buttons but it is up to you to determine when to show them, and what link they should go back to.

Lastly, just a comment about app design, I wonder if you are trying to design interactions that people can easily understand. The idea of navigation just by swiping may make sense in some apps, but having a navbar and following the well established design patterns is important. You might have a very smart design, and many apps design a unique navigation structure that doesn’t conform to what Ionic provides out of the box. That is great when executed well, but not so great otherwise.


#6

Thanks for your help and advice!


#7

I dug a little bit, and perhaps this will help you. The ionScroll directive has a paging attribute that with some creative content styling can do something like a scroll with snap to ‘page’.

Codepen: http://codepen.io/gnomeontherun/pen/oqJnt


#8

That was exactly what I was looking for. Thanks so much!