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: pulling ion-refresher causes large title to be collapsed

See original GitHub issue

Bug Report

Ionic version:

v5.0.4

Current behavior:

When ionic-refresher is pulled it interferes with the collapsible titles. Ionic App

Expected behavior: ionic-refresher shouldn’t after the state of collapsible titles, thus leaving the large title active. Ionic App (1)

Steps to reproduce:

Create a component that contains a collapsible title
Add an ion-refresher
Add an ng-content tag so it can be used in another page 4… Use it as a page template, injecting content through ng-content

Related code:

Template:

<ion-header translucent="true">
  <ion-toolbar>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="person-circle-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{title}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-refresher slot="fixed" pullFactor="0.5" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">{{title}}</ion-title>
    </ion-toolbar>
  </ion-header>

  <ng-content></ng-content>
</ion-content>

Other information:

This does not happen if all the HTML is part of the same page (as shown in the sample for Tab 2) like so:

<ion-header translucent="true">
  <ion-toolbar>
    <ion-title>Tab 2</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-refresher slot="fixed" pullFactor="0.5" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 2</ion-title>
    </ion-toolbar>
  </ion-header>

  ...

</ion-content>

Ionic info:

Ionic:

   Ionic CLI                     : 6.1.0 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Utility:

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

System:

   NodeJS : v13.7.0 (/usr/bin/node)
   npm    : 6.14.1
   OS     : Linux 4.4

Issue Analytics

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

Top GitHub Comments

1reaction

gbrunowcommented, Mar 3, 2020

@liamdebeasi that actually makes a lot of sense, thank you for your time!

0reactions

ionitron-bot[bot]commented, Apr 2, 2020

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.