CODEWITHSUNDEEP
csssafariionic-framework
ohho
ohho

Reputation: 51941

Buttons in ion-footer-bar are overlapping

I am try to use Ionic ion-footer-bar to show three fixed buttons and unlimited other scrolling buttons:

enter image description here

However, the fixed icons are overlapping each other, in Safari. The code is on: CodePen

How can I have the blue buttons layout properly?

Upvotes: 1

Views: 838

Answers (1)

Nikola
Nikola

Reputation: 15038

Well, don't know if this will suffice, but one thing you could do is add this to your CSS:

.buttons button{
    margin-right:2px;
}

Here is the updated Codepen: http://codepen.io/anon/pen/doRROV

edit: Also, I played with resizing your Codepen, and it seems if you put this additional CSS rule, it will not overlap once the window is resized:

.buttons{
    min-width: 120px;
}

Updated CSS is in the same Codepen: http://codepen.io/anon/pen/doRROV

Now, I don't know how will this behave on your device though - you may want to calculate the width and then set that min-width accordingly.

Upvotes: 1

Related Questions