I can change footer color, but I can't set it to transparent

#1

So I have this footer

image

through the chrome dev tools I can play around with its style and I can totally see how setting its color to anything works perfectly

image

image

But setting it to transparent doesn’t work, it stays white

image

image

All I really wanted is to have that add button in my page that has a list, so that I can add a new item, I wanted that button fixed on the bottom left side so I looked at the floating buttons (https://ionicframework.com/docs/api/fab-button) but they didn’t work for me, they kept scrolling and didnt stay fixed, so I tried using a footer but not being able to change its transparency isn’t what I’m looking for either, how can I make the footer transparent? Or what other thing could I do to achieve what I’m looking for?

this is my base code without any tries of setting it transparent

<ion-footer no-border>
  <ion-button (click)="dadosTeste()" fab fab-bottom fab-right fab-fixed mode="ios" fill="clear" icon-only>
    <ion-icon class="customIcon" name="add-circle-outline" mode="ios" style="font-size: 2em;"></ion-icon>
  </ion-button>
</ion-footer>
#2

If you just need the button, why not just remove the ion-footer and add a css attribute
position: fixed with some coordinate attributes (e.g top, left) to the button?

#3

test this

<ion-fab vertical="bottom" horizontal="start" slot="fixed">
  <ion-fab-button (click)="dadosTeste()" mode="ios" fill="clear">
    <ion-icon class="customIcon" name="add-circle-outline" mode="ios" style="font-size: 2em;"></ion-icon>
  </ion-fab-button>
</ion-fab>

it’s works for me

2 Likes
#4

No, dont do that. It will make your content height incorrect when scrolling.

#5

Cheers, yeah I’ll end up using this, but tell me one thing that I can’t seem to find, how do I change the color of the ion-fab-button ? Because no matter what I do, it’s always blue
image

#6

I put the ion-fab after the ion-content and it does not change anything in my display.
for the color you can put fill="clear" for transparent or a class css if you want another color

#7

Yeah I tried using that, since that’s how regular buttons become transparent, but it doesn’t seem to work with the fab button


image

#8

Nevermind, achieved image by image