Ionic iOS large title background

Ionic Framework
1

Hi, I’m creating an iOS App with ionic 5. I’d like to use the large title that introduced in ionic 5 (https://ionicframework.com/docs/api/title#collapsible-large-titles). What I want to do is to set a background color for the title part (both ion-header and the header in the top of ion-content), and for ion-content background it’s another color.

I set background for ion-header, and it looks okay for static page. The problem I’m facing is that as the iOS page have a bounce effect, when the page is pulled a little bit down, there will be a space between the fixed ion-header and the second header bar, which will show the color of content background, as the image suggested.

Simulator Screen Shot - iPhone 11 Pro Max - 2020-03-16 at 11.02.07
Simulator Screen Shot - iPhone 11 Pro Max - 2020-03-16 at 11.02.071242×999 90.9 KB

What I want is that the white space becomes the same color as the the title background and the ion-content keep using white. I just tried to put a layer under it to prevent it looks normal, I’d like to ask does any know some better solution? Any suggestion is welcomed, thanks in advance.

1 Like
2

Having the same issue. Were you able to resolve?

3

I have the exact same problem, no fix so far. How did you guys fix that? I’ve tried to hack it with an absolute div, but I don’t get it right.

4

Do you mean like that?

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
        Title
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Title </ion-title>
    </ion-toolbar>
  </ion-header>
</ion-content>
5

yes. like the sampe provided by ionic document.

6

I can only make the content backound same as the header, and make the background of elements inside content to another color. This works in some cases that can looks like the expected result.

But this method really depends on the design of the page (I mean what kind of element will be in the page), and I will not think this as a “solution”.

7

Hey there,

You should set the background color of ion-content, not ion-header in order to achieve the look you are going for. The main toolbar with the non-large title is hidden with opacity: 0 and progressively shown as you collapse the large title. As a result, the background color you are seeing in the header is the background color of the ion-content.

Doing it this way lets us match the iOS spec. For example, if you open the Settings app notice that the background color of the header matches the background color of the content. As you collapse the large “Settings” title, you should notice that the smaller title fades in and has a lighter gray color.

edit: I added some clarification regarding this to the Ionic docs: https://github.com/ionic-team/ionic/pull/21348. You should see it live on the docs website with an upcoming release of Ionic Framework.