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

1154
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.

READ ALSO
CSS - why my browsers can&#39;t reflect any changes made on the server?

CSS - why my browsers can't reflect any changes made on the server?

I was working on some CSS code and then suddenly the server stopped reflecting any changed made on the serverAt first I thought it was a caching problem but I disabled caching on my browser and even tried using different browsers but still it's using the old version...

168
Bad layout and wrapping on simple Bootstrap page

Bad layout and wrapping on simple Bootstrap page

I am trying to create a simple Bootstrap page that has four input fields each with a side buttonThe four input fields to be in a line horizontally and centered across the screen

147
navigation tabs with changing icon image

navigation tabs with changing icon image

I am trying to make tab navigation with changing image icon, I tried to do it with angular ng-show & ng-hid for icon images but the result was flickeringIs there any easier way to do it?enter image description here

119
Fixed element out of screen on mobile

Fixed element out of screen on mobile

I am developing a widget which could be embedded into the page as an iframe (iframe will be injected and styled via javascript)Iframe should be placed in bottom right corner

158