Override button in footers not working

1

This link http://ionicframework.com/docs/components/#buttons-headers-footers states that if a button is within a footer it will take on a default style, and to override that you should implement the styles you want. However this doesnt work. If i put a button with the ion-footer and have the following classes, the button does appear any different

My Button

Am i doing something wrong or is this a bug?

2

Do yo mind sharing some code? Kind of hard to figure out what the issue is with out any :smile: A codepen would be even better too.

3

Here is a codepen for you. Notice that the normal and large buttons show correctly in content. but in a footer the button does not style

4

Well thats to be expected, the button needs to be able to fit in the footer without messing with its size. This is normal behavior

5

I have the same issue. I need to have a large button inside my footer.

Any suggestion how to do it?

6

Do you have any kind of solution to have a large button at the bottom of your screen?
This is really crucial issue for my project that I need to solve with ionic.

Could you please suggest something a codepen example would be nice to see.

7

In the end i got round this by just using a div element and changing the bottom of my ion-view to be the size of the new bottom div. Example below uses height of 69px for new footer bar to fit button-large elements

example:
ion-view - add bottom = 69px

new div for footer
.myPage .footer-bar {
position: absolute;
bottom: 0;
width:100%;
height: 69px;
}

8

Could you please add some codepen example? I would be more than thankful.

9

Yep, it works for me.

Thank you very much. I’ve to learn css more deeper :blush: