Footer button equi-distant from bottom and sides of the view

ionic-v1
#1

Hey to all you front-end wizards :smile:

I have a question and was wondering if anyone has any pointers…

I need to have a button fixed on the bottom of the view, but it needs to be equi-distant from the sides and bottom of the view. So you can think of the button as a “footer” but if it’s 50px from the left and right margins it needs to be 50px from the bottom margin as well.

Any ideas?

Thanks guys! :smile:

#2

if you already know the padding (this space of 50px that you describe) you just need to use CSS for this component and set this information on it. I have an example, it’s not what you asking for, it’s a button on my google maps, but you can work with that

On the page (html) you’ll use a div and set an ID for your button, just like that:

  <div id="getLocation">
  <a ng-click="centerOnMe()" class="button button-icon icon ion-compass"></a>
  </div>

On the CSS file you have to use this ID and use those 50px you described here. In your case you need to use bottom, left, right, and maybe, width as well.

#getLocation { position: absolute; bottom: 5px; left: 9.7px; width: 95%}

I hope I’ve helped

Good Luck

#3

Thanks so much for the suggestion :smile:

My concern though is that the content on the view is populated dynamically so I don’t always know how much content it will have and surely with the method you describe the button may then sit on top of some of the content? Or am I mistaken?

#4

when you said “the button may then sit on top of some of the content”, you mean “in front”? like in google maps when you have the search box in front of the map?

If is that what you meant, the code I shared with you does that. “position: absolute” put the component above in front everything else you have on your page. So, in that way, doesn’t matter how many components it will be set on your page.

If this is not what meant, please explain it and I will try to help you out.

#5

Hi there.

Thanks again for the response Rafael.

So that’s the exact opposite of what I need :smile: I need the button to site below all the content in the view, like you would expect a fixed footer to be positioned, but equi-distant from the bottom and sides.

Thanks again for the time!

#6

hmmm Gotcha…

I don’t know if you be useful for you, but to do what you wanna do, you can create a DIV, something like a componente to receive others objects, cuz you don’t know the amount. and this DIV you set with “position:a absolute”, then these objects (inside this DIV) will take place in front of everything else, including your button. And for the button, you can create a CSS with “display: block”.

I can’t help you more than that, those are the possibilities I know… If you need something more I won’t be able to help you, sorry.

Anyway, if I couldn’t help you to solve your problem, put the solution here after you solve it… then I can learn how you did.

See ya.