CODEWITHSUNDEEP
htmlcssionic-frameworkbuttonionic3
HerraE
HerraE

Reputation: 107

Ionic Beta Button Height

I am using the ionic beta and want to write a simple calculator app for learning. My first problem now is that I can't change the height of any buttons:

enter image description here

The buttons are placed in an <ion-grid> element:

<ion-content class="mainpage" scroll="false">
<ion-grid>
<ion-row class="result">
  <ion-col><p class="result">0</p></ion-col>
</ion-row>
<ion-row>
  <ion-col width-50><button large round full class="myButton">AC</button></ion-col>
  <ion-col><button large round full class="myButton">+/-</button></ion-col>
  <ion-col><button large round full class="myButton">/</button></ion-col>
</ion-row>
<ion-row>
  <ion-col><button large round block outline class="myButton">7</button></ion-col>
  <ion-col><button large round block outline class="myButton">8</button></ion-col>
  <ion-col><button large round block outline class="myButton">9</button></ion-col>
  <ion-col><button large round full class="myButton">*</button></ion-col>
</ion-row>
<ion-row>
  <ion-col><button large round block outline class="myButton">4</button></ion-col>
  <ion-col><button large round block outline class="myButton">5</button></ion-col>
  <ion-col><button large round block outline class="myButton">6</button></ion-col>
  <ion-col><button large round full class="myButton">+</button></ion-col>
</ion-row>
<ion-row>
  <ion-col><button large round block outline class="myButton">1</button></ion-col>
  <ion-col><button large round block outline class="myButton">2</button></ion-col>
  <ion-col><button large round block outline class="myButton">3</button></ion-col>
  <ion-col><button large round full class="myButton">-</button></ion-col>
</ion-row>
<ion-row>
  <ion-col width-75><button large round block outlin class="myButton"e>0</button></ion-col>
  <ion-col><button large round full class="myButton">=</button></ion-col>
</ion-row>

For the rows I set height: 100%; manually and it worked but the buttons don't stretch with the same attributes. I want them to fill the rows height.

Edit:

Here's the CSS:

ion-grid
{
    height: 100%;
}

ion-row
{
    height: 100%;
}

.myButton
{
    height: 100%;
}

.result
{
    color: white;
    text-align: center;
    font-size: 42px;
    background-color: #00AFFF;
    width: 100%;
    height: 100%;
}

Upvotes: 1

Views: 5025

Answers (5)

marius
marius

Reputation: 349

Add a class to your button:

<button large round full block class="myButton">AC</button></ion-col>

and add a similar code in CSS:

.myButton { height:100%; }

Here is the result:

enter image description here

Upvotes: 0

Ady Rosen
Ady Rosen

Reputation: 33

IONIC 4.0

In Ionic 4.0 you have to set shadow DOM variable like so:

ion-button { --height: auto; }

Upvotes: 0

Alessandro Ornano
Alessandro Ornano

Reputation: 35392

IONIC 3.x

From HTML template you can create a simple button with:

<button ion-button>Default</button>

enter image description here

If you need exactly the "calculator" buttons:

<button ion-button style="border-radius: 32px;">Default</button>

enter image description here

If you want the outline style simply you can write:

<button ion-button outline style="border-radius: 32px;">Default</button>

enter image description here

You can find more information following the official docs.

Upvotes: 0

Daniel S.
Daniel S.

Reputation: 830

I had the same problem.. and I noticed that the main.css has .button-ios and .button-md that adjusts the height of the button component.

In my page scss file I did this:

.button-ios { #ios css 
    height: auto;
}

.button-md { #android css
    height: auto;
}

And it worked.

Upvotes: 2

Asim
Asim

Reputation: 976

 <button class='button button-positive large_button'>
 Large button</button>

and css:

.large_button {
  line-height: 20vh !important;
    width: 50%;
  }

Just give it a class, and define line height.

Upvotes: 0

Related Questions