How to resize ion-content area after ion-header expands

#1

I have a search bar with some advanced options that are hidden and shown via an animation, after beta 10 the header bar is expanding over the content instead of pushing it down because of the calculated margin-top on the content area.

Is there a way I can trigger the margin-top to be adjusted after the header expands?

#2

Figured it out :grin:

@ViewChild(Content) content: Content; 
expand() {
    this.animationState = 'expanded';
    setTimeout(() => {
        this.content.readDimensions();
        this.content.writeDimensions();
    }, 80);
}
#3

this.content.resize() is the correct way to do it. It essentially does the same thing you are doing manually, but is more future proof.

3 Likes
#4

I was looking for a resize method but did not find one. Is resize coming in a future beta? It’s not available to me in beta 10.

#5

Sorry, you’re absolutely right! It’s not present in beta 10!

#6

hey i want expandable list do u have any example link for that??? …i am working on ionic 2

#7

I’m not sure what you mean by expandable list, but here is the relevant code for my advanced search toolbar, hope this helps.


    @Component({
    animations: [
        trigger('openClose', [
            state('collapsed, void',
                style({ height: '0px' })),
            state('expanded',
                style({ height: AUTO_STYLE })),
            transition('collapsed <=> expanded', [
                animate(75)
            ])
        ])
    ]
    })

    ...

    toggle() {
        if (this.animationState == 'collapsed') {
            this.expand();
        }
        else {
            this.collapse();
        }
    }

    expand() {
        this.animationState = 'expanded';
        setTimeout(() => {
            this.content.readDimensions();
            this.content.writeDimensions();
        }, 80);
    }
    collapse() {
        this.animationState = 'collapsed';
        setTimeout(() => {
            this.content.readDimensions();
            this.content.writeDimensions();
        }, 80);
    }

`

    
        
        
        
            
        
    
    
        
            
                Item Type
                
                All
                Crops
                Products
                Tools
                
            
        
    
`
#8

Calling content resize() works when the header is hidden but not when the tabs are also hidden. Any clues on how to make the content flow into the tabs space as well? I am basically trying to implement a full-view toggled with the “F” key on the desktop.

Ionic:

   ionic (Ionic CLI)  : 4.0.0 (C:\Users\AXM\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : browser 5.0.3

System:

   Android SDK Tools : 25.2.5
   NodeJS            : v7.2.0 (C:\Program Files\nodejs\node.exe)
   npm               : 4.0.5
   OS                : Windows 7

Environment:

   ANDROID_HOME : C:/Users/AXM/AppData/Local/Android/android-sdk

#9

Hi, do you have idea how to expand the header on click ?