CODEWITHSUNDEEP
iosangularjsionic-frameworkionic-view
Caleb Faruki
Caleb Faruki

Reputation: 2725

<ion-footer-bar> displays in iOS Ionic View with thin grey line

<ion-footer-bar class="pizza-footer">
    <img ng-src="img/pizza_bottom.png" />
</ion-footer-bar>

In my stylesheet, I have these styles applied to both the footer bar and the image.

ion-footer-bar {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color:transparent !important;
}

Despite this attempt, there is still a thin grey line above the footer bar that I cannot remove. Is there a CSS property I should consider?

NOTE: This grey line only appears when I compile and view the app in Ionic View. Chrome and Safari do not show this grey line.

Upvotes: 0

Views: 1390

Answers (2)

Davideas
Davideas

Reputation: 3276

With ionic 2+ use the attribute no-border:

<ion-footer no-border>
...
</ion-footer>

It works also for <ion-header>

Upvotes: 0

Luis Guzman
Luis Guzman

Reputation: 36

Try this:

<ion-footer-bar class="pizza-footer no-line">
    <img ng-src="img/pizza_bottom.png" />
</ion-footer-bar>

.no-line{
  background-color:transparent !important;
  background-image: none !important;
  border:0px !important;
}

Upvotes: 2

Related Questions