Ionic 2 - how to make ion-button with icon and text on two lines?
Solution 1
You are along the right lines. A slight modification is needed for it to work.
Here is my markup:
<button ion-button block color="menu-o">
<div>
<ion-icon name="flash"></ion-icon>
<label>Flash</label>
</div>
</button>
The inner <div>
inside the <button>
is the trick. The only thing needed for this markup is to set the <label>
element to display: block
.
Since <p>
is already a block level element. It may just work as is.
Solution 2
This will do the trick:
.button-inner {
flex-flow: column;
}
This will change the element ordering from horizontal to vertical.
FrancescoMussi
Full-stack developer based in Riga, Latvia. Hope Socrates is proud of my Socratic badge on StackOverflow.
Updated on July 05, 2022Comments
-
FrancescoMussi almost 2 years
THE SITUATION:
In my Ionic 2 app I need to have the menu button on two lines: icon and text.
The problem is that somehow the ion-button directive force the button to be on one line.
I need the ion-button directive to be sure the button has always the proper formatting and positioning responsively. I just need that button to be on two lines.
This the html and css of my attempt:
THE HTML:
<ion-header> <ion-navbar> <button ion-button menuToggle="left" start> <ion-icon name="menu"></ion-icon> <br /> <p class="menuSubTitle">MENU</p> </button> <ion-title> HomePage </ion-title> <button ion-button menuToggle="right" end> <ion-icon name="person"></ion-icon> <br /> <p lass="menuSubTitle">LOGIN</p> </button> </ion-navbar> </ion-header>
THE CSS:
.menuSubTitle { font-size: 0.6em; float:left; display: block; clear: both; }
THE QUESTION:
How can I make a ion-button on two lines?
Thanks!
-
FrancescoMussi over 7 yearsGreat job! Thanks!