Remove border top with ion-content fullscreen and ion-refresher

Ionic Framework ionic-v3
1

Hey Guys,

I’m fighting with a problem and could not find any solution. I try to use a nav-bar and tab-bar with some opacity which is no problem with <ion-content fullscreen> and some styling for the tab-bar and nav-bar:

In variables.scss:

$toolbar-background: rgba(0, 0, 0, 0.85);
$tabs-ios-background: rgba(0, 0, 0, 0.85);
$tabs-md-background: rgba(0, 0, 0, 0.85);

But now, when I’m using this together with a new page and an ion-refresher, I will get an ugly 1px line which moves from top while pulling down the view to refresh.

You can see it on those pictures:

image
Bildschirmfoto 2017-03-24 um 18.53.19.png340×606 11 KB

image
Bildschirmfoto 2017-03-24 um 18.53.31.png348×610 26.3 KB

The Code for my page looks like this:

<ion-header>

  <ion-navbar>
      <ion-title>Populär</ion-title>
  </ion-navbar>

</ion-header>

<ion-content fullscreen>

  <ion-refresher (ionRefresh)="doRefresh($event)">
     <ion-refresher-content pullingText='{{ "POPULAR.PULLTOREFRESH" | translate }}'>
     </ion-refresher-content>
  </ion-refresher>

  <div style="color: white;">Hallo Test</div>
</ion-content>

With this Styles:

page-popular {
      ion-content {
        background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 20%, white 70%);
      }
    }

How can I get rid of this Line? The no-border attribute does not work.

Thanks in advance for any help! :slight_smile:

1 Like
2

Oh well, actually I found a solution which works with the inspector. For any other guys who are searching for a solution, use this styles:

    .has-refresher  .scroll-content {
    border-top: 0 !important;
  }
6 Likes