Ionic 2 app - I have a list of items, I use text-wrap to avoid text cutting off when i increase font size however when text-wrap attribute is used the font seems to go back to what I assume is the default size for text-wrap attribute. How do I change text-wrap (default) font size?
Font size increased - without text-wrap:
Font size increased - with text-wrap:
HTML
<ion-list text-wrap>
<div *ngFor="let item of menuItems">
<button ion-item (click)="goToPageFn(item)" class="app-font-25">
<b>{{item.name}}</b>
</button>
</div>
</ion-list>
CSS: [edit]
text-wrap {
font-size: 25px;
}
.app-font-25 {
font-size: 25px;
}
Ionic2 have in built css for button which makes it to not wrap the text content. If you want to alter the size of the text and as well to wrap it, modify your code as below
<ion-list>
<div *ngFor="let item of menuItems">
<button ion-item (click)="goToPageFn(item)" class="app-font-25">
<b>{{item.name}}</b>
</button>
</div>
</ion-list>
Your CSS:
.app-font-25 ion-label{
white-space: inherit;
font-size: 25px;
}
text-wrap is not required both in your html and css.
Related
<button mat-raised-button color="warn">
<mat-icon>delete</mat-icon>
Remove Driver
</button>
How to add padding in between mat-icon and button title?
I want to keep the button title in the middle of the button and keep the icon in the left corner.
You can achieve this by adding a padding to your button text instead of the icon.
Add a class for the button text in the template.
<button mat-raised-button color="warn">
<mat-icon>delete</mat-icon>
<span class="button-text">Remove Driver</span>
</button>
Then define button-text in the CSS.
.button-text {
padding-left: 50px;
padding-right: 74px; /* Add 24px to align the text in the center since the icon's width is 24px */
}
For that you need to add span tag for that under button title
<button mat-raised-button color="warn">
<mat-icon>delete</mat-icon>
<span class="button-title">Remove Driver</span>
</button>
Then just add this .button-title in your CSS file for Styling
.button-title{
padding: 5px 50px 5px 50px;
}
This is Example You Can edit or preview Code Here on StackBlitz
I have the following code:
<ion-button expand=“full” (click)=“do()“>
<ion-icon name=“cart” slot=“start”></ion-icon>
TEXT
</ion-button>
I want the content (the TEXT and the ion-icon) to be aligned to the left and tried:
ion-button {
display: flex;
justify-content: flex-start;
}
I thought this would result into aligning the content to the left but nothing happens. It seems that the css is totally ignored.
You can align the text and icon to the left if you add a div inside your button and use Ionic 4 CSS Utilities (in your case text-left / text-start).
<ion-button expand=“full” (click)=“do()“>
<div text-left>
<ion-icon name=“cart” slot=“start”></ion-icon>
TEXT
</div>
</ion-button>
Make sure to give the div the full width of the button
ion-button > div {
width: 100%;
}
Documentation:
Ionic 4 CSS Utilities
Wrap your inner in span and add in css
.inner-span{
margin-left:auto;
}
As below (use " instead “)
<ion-button expand="full" (click)="do()">
<span class="inner-span">
<ion-icon name="cart" slot="start"></ion-icon>
TEXT
</span>
</ion-button>
See working code
This is ionic2 showing in iPad
This is showing in Iphone 6 plus
page.html
<ion-content color="danger">
<div padding class="about-button">
<a ion-button color="light" href="tel:123456">
立即拨打
</a>
</div>
</ion-content>
page.scss
.about-button {
text-align: center;
background-color: #F44336;
}
I don't why in Ipad showing some white screen at the bottom
How can I set the button at the bottom of the page.
First time use ionic, can ionic set something to access all device screen?
Finally, I found the problem.
page.html
<ion-content color="danger">
<div padding class="about-button">
<a ion-button color="light" href="tel:123456">
立即拨打
</a>
</div>
</ion-content>
ion-content cannot use color="danger", change it to <ion-content class="bg-style"> and change scss file also.
page.scss
.bg-style {
background: #F44336;
}
By this way to solve white screen at bigger size devices
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 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.
This will do the trick:
.button-inner {
flex-flow: column;
}
This will change the element ordering from horizontal to vertical.
You have to change the button height if you want it a bit prettier. (e.g. with icon margin)
.button-icon-top {
height: 5em;
.button-inner {
flex-flow: column;
.icon {
margin-bottom: 10px;
font-size: 2em;
}
}
}
Just add the class name to your button.
<button ion-button full large class="button-icon-top">
<ion-icon name="logo-twitter"></ion-icon>
<span>Click me</span>
</button>
I am using ionic and wanted vertical span elements to have a certain distance between.
Here is a demo:
http://play.ionic.io/app/8682286f77a8
<ion-item class="item item-avatar icon-row">
<img src="img/sale_icon.jpg">
<span style="color:#078d00;font-size:22px; margin-bottom: 1opx"> {{ '36,000' }}</span>
<br>
<span style="color:#4b4b4b;font-size:18px"> Sale</span>
</ion-item>
However, margin-bottom is not working at all.
I could use another br between these spans and that works but it create more distance than I really want to.
What does really look wrong with it in above piece of code?
Just add display: inherit; property to span. It will work.
Plus, whenever you add some styling in ionic framework, don't forget to add !important with styling, because elements in ionic directives inherit styling from parent element.
Add display:inline-block to the span. It will make them respect the margin-bottom property.
<ion-item class="item item-avatar icon-row">
<img src="img/sale_icon.jpg">
<span style="color:#078d00;font-size:22px; margin-bottom: 10px;display:inline-block;"> {{ '36,000' }}</span>
<br>
<span style="color:#4b4b4b;font-size:18px;display:inline-block"> Sale</span>
</ion-item>
I've updated your code -
span {
display: list-item;
list-style-type: none;
}
now margin-bottom works well!!
Full Code -
<ion-item class="item item-avatar icon-row">
<img src="img/sale_icon.jpg">
<span style="color:#078d00;font-size:22px; margin-bottom:10px;"> {{ '36,000' }}</span>
<span style="color:#4b4b4b;font-size:18px;"> Sale</span>
</ion-item>
/* CSS */
span {
display: list-item;
list-style-type: none;
}
Working Demo, with display: list-item you don't need to add <br> after the span.