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!
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.
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
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...
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
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
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