johnnyfittizio johnnyfittizio - 13 days ago 7
CSS Question

Ionic 2 - how to make ion-button with icon and text on two lines?

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

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.