Ionic 2: how position a button at bottom

Ionic Framework ionic-v3
1

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-grid>
    <ion-row style="position:fixed; bottom:30px;">
      <ion-col><button ion-button full>Button</button></ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

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!!!

image

Help me

1 Like
2

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

<ion-content>
...
</ion-content>
<ion-footer no-shadow>
	<ion-toolbar position="bottom">
		<button ion-button full>Button</button>
	</ion-toolbar>
</ion-footer>
4 Likes
3

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

4

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 ...
           </ion-list>
        </ion-scroll>

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

Edit: Simplified it

1 Like
5

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

6

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

7

Put your button bellow your ion-content