0
<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.

Caleb Faruki
  • 2,577
  • 3
  • 30
  • 54

2 Answers2

2

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;
}
  • That seemed to solve it! Thanks! Do you think you could point out exactly what the property was that caused this to happen? I suspect it was `background-color`. – Caleb Faruki Aug 17 '15 at 14:08
0

With ionic 2+ use the attribute no-border:

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

It works also for <ion-header>

Davideas
  • 3,226
  • 2
  • 33
  • 51