CODEWITHSUNDEEP
htmlcssionic-framework
Tom
Tom

Reputation: 4107

Ionic: position button from bottom

In ionic how can i put a button at some percentage from the bottom ion-content?

I've tried

<ion-view>
   <ion-content>
       <div class="button-bottom">
         <button class="button button-block button-energized">Button</button>
       </div>
   </ion-content>
</ion-view>

css:

.button-bottom{
position: absolute;
bottom: 30%;
}

but the button now not take the full width.

Upvotes: 1

Views: 11948

Answers (3)

W. Guilherme
W. Guilherme

Reputation: 1

Just move the button to outside of the ion-content.

Example:

Ionic 3:

<ion-view>
   <ion-content>

   </ion-content>

       <div class="button-bottom">
         <button class="button button-block button-energized">Button</button>
       </div>

</ion-view>

Ionic 4:

<ion-header>
  <ion-toolbar>
    <ion-title>Example</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

<p> your content </p>

</ion-content>

<ion-row>
  <ion-col>
    <ion-button>
      Button Bottom (Not fixed on scroll)
    </ion-button>
  </ion-col>
</ion-row>

Upvotes: -1

Patel Disha
Patel Disha

Reputation: 219

Add "full" variable in your button

Ex:- button class="button button-block button-energized" full >Button</button>

For more reference see Ionic Documentation on UI Components in the link below.

Ionic Full Button

Upvotes: 1

Shadi Shaaban
Shadi Shaaban

Reputation: 1720

Try giving your container an explicit width:

.button-bottom{
position: absolute;
bottom: 30%;
width: 100%;
}

Upvotes: 5

Related Questions