Ionic 2 - how to make ion-button with icon and text on two lines?
3727
November 25, 2016, at 11:03 PM
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!
Answer 1
You are along the write 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.
POPULAR ONLINE
- In Chrome 55, prevent showing Download button for HTML 5 video 7364 visits
- search for elements in a list 6171 visits
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 5022 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 4906 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 3728 visits
- Conflict: Multiple assets emit to the same filename 3506 visits
- Adding methods to es6 child class 3151 visits
