[SOLVED] Ion-footer ion-toolbar transparent aka border top drive me crazy

Ionic Framework ionic-v3
1

Hey,

Anyone knows how to how to implement an ion-footer / ion-toolbar transparent?

<ion-footer>
  <ion-toolbar>
    <ion-button....></ion-button>
  </ion-toolbar>
</ion-footer>

I tried to set background-color=transparent, border=0, no-shadow etc. on each elements but I always end up, at list with ion-footer class=“footer footer-md”, with a displayed border at the top of the footer…what do I miss?

2

Freak got it…sometimes you search for hours, then you post a topic and you find your solution 5 minutes later :wink:

So for the record, the footer-md style add a background-image before the style. So the solution:

ion-footer {
    &.footer-md::before {
        background-image: none;
    }
}
6 Likes
3

There’s an easier way :slight_smile: use the transparent attribute.

A la

<ion-footer>
    <ion-toolbar transparent>
    </ion-toolbar>
</ion-footer>

Should do it.

2 Likes
4

Hi @keldar89,

For some reason the “transparent” does not work with Galaxy S5 (Chrome dev tools). Only iphones

5

Yes adding below in the scss

.scroll-content {
    margin-bottom: 0!important;
  }

along with

<ion-footer text-center no-border transparent>

in the HTLM will do :smiley:

6

Hi,

While the transparency is achieved, I noticed that the scrolling stopped working. Have you encountered the same issue?