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;
}
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 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:
I need to position two checkboxes inline next to each other with their belonging
label on the left of each checkbox.
Here is picture for better understanding: (on picture there is an e-mail checkbox which does not exist in app so just ignore it, there should be only two checkboxes)
Everything I tried so far didn't gave me wanted output so this is a code which I have now in the app.
This is in my form element:
<ion-item>
<ion-label text-uppercase>Phone Calls</ion-label>
<ion-checkbox name="receive_calls"
[ngModel]="(contact$ | async).receive_calls">
</ion-checkbox>
</ion-item>
<ion-item>
<ion-label text-uppercase>Text Messages</ion-label>
<ion-checkbox name="receive_messages"
[ngModel]="(contact$ | async).receive_messages">
</ion-checkbox>
</ion-item>
I won't provide style code because it does not work at the moment.
You can replace the <ion-item>-elements with <div>'s, to get away from the extra styling you get from the <ion-item> elements. Also i wrapped the checkboxes in an outer <div>:
HTML:
<div>
<div float-left class="my-checkbox">
<ion-label text-uppercase>Phone Calls</ion-label>
<ion-checkbox name="receive_calls">
</ion-checkbox>
</div>
<div float-right class="my-checkbox">
<ion-label text-uppercase>Text Messages</ion-label>
<ion-checkbox name="receive_messages">
</ion-checkbox>
</div>
</div>
SCSS:
.my-checkbox {
display: flex;
align-items: center;
}
RESULT:
You can use instead of
<ion-item>
<span>SMS </span>
<ion-checkbox></ion-checkbox>
</ion-item>
For some reason Ionic think that my page has content and is adding in a scrollbar. Here is my page:
And the code for the page:
<ion-header>
<ion-navbar>
<ion-title>Week</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="createPage()">
<ion-icon name="add"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
I found this thread here which tells you how to remove the scroll bar, which I can do but I want to track down what is causing it to appear in the first place.
Any ideas are appreciated. Thanks.
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>