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
Related
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
I'm working on a project and i simply need make this type of navigation menu in my app main page.
But if i use png image to a card that getting auto zoom and getting ugly look. That is what i am talking about
This news icon png is 50px image. I want display this as small icon. I am not using ionic provided icon because they have very limited icon list. Therefor i used other icon. If i go with ionic icons how i can resize their icon as i want?
Here my codes
<ion-content padding id="myPage">
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-card color="secondary">
<img src="../../assets/imgs/News_50px.png" class="" alt="" />
<ion-card-content text-center>NEWS</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-6>
<ion-card>
<img src="../../assets/icon/icons8-handshake-96.png" class="" alt="" />
<ion-card-content>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
What i can do for make my app look likes above i mentioned app look and can i resize my card height and width as i want?
If you go with your png just use css.
For example:
ion-card img { width: 20%; height: 20%; }
For this apporach the images should have the same initial width and height, otherwise you need to do it with a custom class on each image and put it the size you need.
If you want to use ionic icons you can give them another size with the font-size, e.g 1.5em. Than you can check the size of the window and resize it in css. If width > 800 px, font-size: 1.8em and so on... (https://www.w3schools.com/css/css_rwd_mediaqueries.asp)
I hope you can help me with my design, as you see in this image:
As you can see this messy, icons with the letters of the buttons, on the other hand also does not focus my image, I hope I can help since there is very little of scss in ionic:
Code Ionic:
<ion-content padding>
<img style="align-items: center" src="./../assets/logo.png">
<br>
<br>
<button ion-button icon-start center round full><ion-icon name="logo-facebook"></ion-icon>Registrate via Facebook</button>
<button ion-button icon-start center color="secondary" round full><ion-icon name="person-add"></ion-icon>Servicio Particular</button>
<button ion-button icon-start center color="dark" round full><ion-icon name="briefcase"></ion-icon>Servicio Corporativo</button>
<br>
<p>¿Eres nuevo? REGISTRATE AHORA</p>
</ion-content>
code .scss
page-home {
p {
text-align-last: center;
}
}
Examplo:
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.
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>