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

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:

The Code for my page looks like this:




<ion-content fullscreen>

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

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

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

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;