Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: using collapse="condense" on IonHeader from "Collapsible Large Titles" guide causes overlaps

See original GitHub issue

Bug Report

Ionic version:

[x] 4.x

Current behavior:

IonButtons & IonTitle are overlaped

Expected behavior:

There shouldn’t be an overlap here. It seems that second IonButtons should be collapsed as they have collapse set to true.

Steps to reproduce:

Related code:

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonButtons collapse={true}>
        <IonButton>Click Me</IonButton>
      </IonButtons>
      <IonTitle>Home</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
    <IonHeader collapse="condense">
      <IonToolbar>
        <IonButtons collapse={true}>
          <IonButton>Click Me</IonButton>
        </IonButtons>
        <IonTitle size="large">Home</IonTitle>
      </IonToolbar>
      <IonToolbar>
        <IonSearchbar/>
      </IonToolbar>
    </IonHeader>
    {...}
</IonPage>

Other information:

I’ve took the Collapsiblle Large Titles small example from the original guide: https://ionicframework.com/docs/api/title#collapsible-large-titles

Ionic info:

Ionic:

   Ionic CLI       : 5.4.11 (/Users/ak/.nvm/versions/node/v10.16.3/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 4.11.8

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.3 (/Users/ak/.nvm/versions/node/v10.16.3/bin/node)
   npm    : 6.9.0
   OS     : macOS Catalina

Issue Analytics

State:
Created 4 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

alekseykarpenkocommented, Jan 23, 2020

@liamdebeasi ahh, okay, I got it, I should use upper header for those icons. Thx for explaining this.

1reaction

liamdebeasicommented, Jan 21, 2020

The behavior you are describing is still possible. What I was referring to in my previous comment is having a button to the left of the “Favorites” text, which is not something that happens in the native iOS spec. The image you have posted shows a “+” button above the “Favorites” text.

To get the behavior you are describing, you would do something like:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button slot="icon-only">
        <ion-icon name="add"></ion-icon>
      </ion-button>
    </ion-buttons>

    <ion-title>Favorites</ion-title>

    <ion-buttons slot="end">
      <ion-button>Edit</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Favorites</ion-title>
    </ion-toolbar>
  </ion-header>
</ion-content>