# How to resize ion-content area after ion-header expands **URL:** \ **Category:** ionic-v3\ **Created:** [July 21, 2016, 9:23pm UTC](https://forum.ionicframework.com/t/how-to-resize-ion-content-area-after-ion-header-expands/58235 "2016-07-21T21:23:11Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![fcmmaddog](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/fcmmaddog/32/72084_2.png) [@fcmmaddog](https://forum.ionicframework.com/u/fcmmaddog)\ **Post date:** [July 21, 2016, 9:23pm UTC](https://forum.ionicframework.com/t/how-to-resize-ion-content-area-after-ion-header-expands/58235/1 "2016-07-21T21:23:11Z")
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? ---
**Author:** ![fcmmaddog](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/fcmmaddog/32/72084_2.png) [@fcmmaddog](https://forum.ionicframework.com/u/fcmmaddog)\ **Post date:** [July 21, 2016, 9:54pm UTC](https://forum.ionicframework.com/t/how-to-resize-ion-content-area-after-ion-header-expands/58235/2 "2016-07-21T21:54:42Z")
Figured it out 😁 ``` @ViewChild(Content) content: Content; expand() { this.animationState = 'expanded'; setTimeout(() => { this.content.readDimensions(); this.content.writeDimensions(); }, 80); } ``` ---
**Author:** ![infoproducts](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/infoproducts/32/100372_2.png) [@infoproducts](https://forum.ionicframework.com/u/infoproducts)\ **Post date:** [July 22, 2016, 5:11pm UTC](https://forum.ionicframework.com/t/how-to-resize-ion-content-area-after-ion-header-expands/58235/3 "2016-07-22T17:11:15Z")
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. ---
**Author:** ![fcmmaddog](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/fcmmaddog/32/72084_2.png) [@fcmmaddog](https://forum.ionicframework.com/u/fcmmaddog)\ **Post date:** [July 22, 2016, 5:59pm UTC](https://forum.ionicframework.com/t/how-to-resize-ion-content-area-after-ion-header-expands/58235/4 "2016-07-22T17:59:33Z")
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. ---
**Author:** ![infoproducts](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/infoproducts/32/100372_2.png) [@infoproducts](https://forum.ionicframework.com/u/infoproducts)\ **Post date:** [July 22, 2016, 6:54pm UTC](https://forum.ionicframework.com/t/how-to-resize-ion-content-area-after-ion-header-expands/58235/5 "2016-07-22T18:54:04Z")
Sorry, you’re absolutely right! It’s not present in beta 10! > ---
**Author:** ![varshil29](https://avatars.discourse-cdn.com/v4/letter/v/49beb7/32.png) [@varshil29](https://forum.ionicframework.com/u/varshil29)\ **Post date:** [August 11, 2016, 6:49am UTC](https://forum.ionicframework.com/t/how-to-resize-ion-content-area-after-ion-header-expands/58235/6 "2016-08-11T06:49:40Z")
hey i want expandable list do u have any example link for that??? …i am working on ionic 2 ---
**Author:** ![fcmmaddog](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/fcmmaddog/32/72084_2.png) [@fcmmaddog](https://forum.ionicframework.com/u/fcmmaddog)\ **Post date:** [August 11, 2016, 5:26pm UTC](https://forum.ionicframework.com/t/how-to-resize-ion-content-area-after-ion-header-expands/58235/7 "2016-08-11T17:26:40Z")
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 ` ``` ---
**Author:** ![AlGantori](https://avatars.discourse-cdn.com/v4/letter/a/35a633/32.png) [@AlGantori](https://forum.ionicframework.com/u/AlGantori)\ **Post date:** [August 7, 2018, 9:19am UTC](https://forum.ionicframework.com/t/how-to-resize-ion-content-area-after-ion-header-expands/58235/8 "2018-08-07T09:19:54Z")
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. ```auto 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 ``` ---
**Author:** ![RubyRavenford](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rubyravenford/32/122621_2.png) [@RubyRavenford](https://forum.ionicframework.com/u/RubyRavenford)\ **Post date:** [March 15, 2019, 4:32am UTC](https://forum.ionicframework.com/t/how-to-resize-ion-content-area-after-ion-header-expands/58235/9 "2019-03-15T04:32:27Z")
Hi, do you have idea how to expand the header on click ?