Adding custom component removes margin-top from scroll-content

Ionic Framework ionic-v3
1

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.

Initially:

`

 <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">
   Hello
  </p>
 </div>

</ion-content>

`

image
Screenshot_20160804-121641[1].jpg300×533 57.1 KB

But if I add custom compnent like this:

`

<ion-content class="home">

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

 <div>
  <search-section></search-section>
 </div>

</ion-content>

`

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

image
Screenshot_20160804-121345[1].jpg300×533 64.4 KB

Any Idea why this happens ?

2

Hi,

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:

`

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

    <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>{{person.name.first}} {{person.name.last}}</h2>
            <p>{{person.email}}</p>
        </ion-item>
    </ion-list>
</ion-content>

`

and the header-component markup looks like the following:

`

<ion-header>
    <ion-navbar>
        <ion-title>APPTITLE</ion-title>
        <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>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

`

3

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

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

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!

1 Like
5

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

6

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

7

thx for your input. i will try it.

8

@santclearcosta @genericsdev @vuhung3990 @ashfaqpatwari @mi3infomaze you should wrap it in ion-header. Please see https://github.com/driftyco/ionic/issues/9878

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

2 Likes
9

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

1 Like