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
Related
I have an ionic clickable icon (svg) and I placed it in a button. I set the fill to clear because I only want that the point cursor appears. The icon is in a grid on a cell.
Without the button around it looks correctly like this
With the button around it looks like that
The row is defined in this way. I set no-padding because in the next row I have more icons and the padding should be minimal.
<ion-row no-padding>
<ion-col></ion-col>
<ion-col ion-item no-lines no-padding text-center (click)="cmbAButton.open()">
<ion-button icon-only fill="clear" >
<ion-icon class="big" src="/assets/{{aSelectedIcon}}.svg"></ion-icon>
</ion-button>
</ion-col>
<ion-col></ion-col>
</ion-row>
In scss I have
ion-icon {
&.big {
width: 40px;
height: 40px;
}
I am using ionic 3.
<ion-header>
<ion-navbar>
<ion-title>{{ title }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
<ion-footer>
<ion-title>
{{ title }}
</ion-title>
</ion-footer>
What ever I put in "ion-content" there is no scroll when content overcome height of the screen.
I tried with grid in content:
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
<ion-col col-6>
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
<ion-col col-12 class="left-col">
<ion-label>Some label</ion-label>
<div>Some text</div>
</ion-col>
</ion-row>
</ion-grid>
Also tried with list:
<ion-list>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item>Item 3</ion-item>
...
</ion-list>
Nothing works. What is the catch here ?
I think this should be handled automatically by Ionic.
To enable vertical scroll to your page or any other container, there is a tag called
<ion-scroll scrollY="true">
// your content here
</ion-scroll>
To enable horizontal scroll, just change scrollY=true to scrollX=true
in your sass file add the following :
ion-scroll {
white-space: nowrap;
height: 500px;
}
The real problem is that ionic global CSS property was overridden in the project.
"scroll-content" class must not be changed in project styles.
You can use 'ion-list' property in CSS and change this:
ion-list
{
overflow-y: scroll;
};
Also, if doesn't change yet, you can put '!important' after, like this:
ion-list
{
overflow-y: scroll !important;
};
I want to have a list item that can be swiped to reveal an archive button.
The icon should be to the left of the text.
I'm following the doc here (Button Layout): https://ionicframework.com/docs/api/components/item/ItemSliding/
<ion-item-options icon-start>
<button ion-button (click)="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive
</button>
</ion-item-options>
But it still displays the icon on top of the text, see an example here: https://stackblitz.com/edit/ionic-fhhzdy?file=pages/home/home.html
What am I missing?
Seems like it's caused because of a bug in how the CSS rules are being applied but in the meantime, it works properly if you also add the icon-left attribute
<ion-content padding>
<ion-list>
<ion-item-sliding #item>
<ion-item>
Swipe me!
</ion-item>
<ion-item-options icon-left icon-start> <!-- Here! -->
<button ion-button (click)="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
Working stackblitz project
More info:
I've found that the following style rule is being applied which causes the issue. So the only way to avoid this issue is to use both icon-left and icon-start attributes:
// The issue is because of this style rule...
ion-item-options:not([icon-left]) .button:not([icon-only]) .button-inner,
ion-item-options:not([icon-start]) .button:not([icon-only]) .button-inner {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
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>