Adding custom component removes margin-top from scroll-content


In my App, I am trying to add a custom component inside a page.

Without the component, the scroll-content is having proper margin-top. But if I add the component, then margin is not there and my content goes under header.



 <ion-content class="home">

  <div text-center padding>
    <img src="images/logos/logo.png" width="205" height="45" margin-top>
    <p white class="f-16 line-height-13">



But if I add custom compnent like this:


<ion-content class="home">

<div text-center padding>
<p white class="f-16 line-height-13">




Then scroll-content loses margin-top and content goes behind header:

Any Idea why this happens ?



same problem for me. Tried to lay out the ion-header in a custom component an i got the same isssue.

i am on the latest release 11.

this is the page markup:


<ion-content padding class="home">
    <ion-refresher (ionRefresh)="doRefresh($event)">

    <h4>Page Title</h4>

    <ion-searchbar (ionInput)="onSearchBarInput($event)"></ion-searchbar>
    <ion-list margin-top no-border-top="">
        <ion-item *ngFor="let person of wantads" (click)="openDetailsPage(ContactPage)">
            <h2>{{}} {{}}</h2>


and the header-component markup looks like the following:


        <ion-buttons end>
            <button menuToggle>
                <span style="display: inline-block;padding: 6px 6px;background: #2867da;color: #fff;font-weight: bold; border-radius: 3px">T!</span>



In the app.variables.scss file add this style:

ion-page > ion-content > scroll-content {
	margin-top: 56px !important;


Yes, that was the solution I come up with, but IMHO that’s just a workaround. I expected the layout to be recalculated correctly when adding custom components.

Anyway, thank you for your replay!


i have same issue, is there any update about this question ?


hey guy, i very lucky to find a solution that i want to share with you

.toolbar {
  padding: 4px;
  height: 44px; // just change default (min-height: 44px) -> height 

hope this work with you


thx for your input. i will try it.


@santclearcosta @genericsdev @vuhung3990 @ashfaqpatwari @mi3infomaze you should wrap it in ion-header. Please see

<ion-header> <my-component></my-component> </ion-header> <ion-content></ion-content>


@onderceylan It makes a lot of sence! Thank you for sharing!