Ionic 2: how position a button at bottom

Hi, in ionic 2 i want design a login page with a button fixed at bottom.

I have the following markup:

<ion-content padding class="login-background no-scroll" >
    <ion-row style="position:fixed; bottom:30px;">
      <ion-col><button ion-button full>Button</button></ion-col>

where i have read how to not show the scrollbar (and it works):

.no-scroll .scroll-content{
          overflow: hidden;

The problem is that i can see the button at bottom, but aligned to right and i don’t know why!!!


Help me

1 Like

@tomcraft2xlc Try to put the button inside an ion-footer instead of inside the ion-content. Something like:

<ion-footer no-shadow>
	<ion-toolbar position="bottom">
		<button ion-button full>Button</button>

Yep…the problem is that i want position other button starting from bottom

So I dont’ know if there is a better solution but I did it using css to have a view of 100% height (form in this case could be any block element). Then use a scrollView (ion-scroll) which shrinks and a bottom view with fixed height.
Must verify this is still working but that could work for you?

Sorry about the outline

   <form style="display:flex; height: 100%; flex-direction: column;" >
        <ion-scroll scrollY=true style="flex: 1 0 0;" >
           <ion-list >
             ... Dynamic top content goes here ...

        <div padding>
            <button ion-button >Submit</button>

Edit: Simplified it

1 Like

does the (click) attribute for button work outside the ion-content ??
i belive it doesn’t :roll_eyes:

Yes, you can use click event in Footer as well as in Header too.