So my problem is that under my label i have an underline that i want to delete. i added no-lines to my ion-label but it's seems to not working.
Is there a way to delete it ?
<ion-item class="checkbox" >
<ion-label></ion-label>
<ion-checkbox class="checkbox-square" (ionChange)="changeEvent($event)"></ion-checkbox>
</ion-item>
And this is the css
.checkbox{
font-size: 1.03rem;
color: $blue-love;
max-width: 400px;
margin: auto;
}
Add this to your css
.checkbox .item-inner {
border-bottom: none !important;
}
Without touching the CSS: This worked out for me
https://www.codegrepper.com/code-examples/html/how+to+remove+the+underline+from+ion+item
TLDR;
<ion-item lines="none">
<ion-tags...>
</ion-item>
Add custom class inside ion-label element:
<ion-label class="custom-label-style">
Label content
</ion-label>
Then style it with text-decoration property:
.custom-label-style {
text-decoration: none;
};
Related
Lately I am trying to migrate my Ionic 3 project to Ionic 4. Most of the migration is going successful but I keep having problems with my styling.
After some reading I changed a few things to my styling, listed below:
Moved global styling from app.scss to global.scss
Changed theme styling $colors for example to :root { ion-color- ... }
Changed naming of (some) components (ion-navbar to ion-toolbar, button to ion-button, etc.)
Removed page selectors in page-specific styling (so removed page-login { ... } in login.scss)
Though the styling is still not quite right. I am probably still missing some things.
As example I am using my page-specific style for my login page.
In Ionic 3 the style file looked as follows for this page:
page-login {
.content {
background: url('../assets/img/background.png') no-repeat;
background-size: cover;
#logo {
padding-top: 5rem;
}
form {
position: absolute;
bottom: 0;
width: 100%;
.logo-row {
margin-bottom: 40%;
}
.form-inputs {
.label-ios {
width: 60px;
max-width: 60px;
}
ion-icon, .select-ios, ::-webkit-input-placeholder {
color: color($colors, lightGray);
max-width: 100%;
}
.item-ios {
background: transparent;
padding-left: 0;
&:first-child {
border-top: none;
}
.input-wrapper {
padding-left: 50px;
input.text-input.text-input-ios {
color: color($colors, lightGray);
}
}
}
[icon-only] ion-icon {
line-height: 1;
}
}
}
}
}
In my Ionic 4 app I changed it to the following:
ion-content {
--background: url('../../../assets/img/background.png') no-repeat;
--background-size: cover;
#logo {
padding-top: 5rem;
}
ion-form {
--position: absolute;
--bottom: 0;
--width: 100%;
.logo-row {
margin-bottom: 40%;
}
ion-inputs {
.ios ion-label {
--width: 60px;
--max-width: 60px;
}
ion-icon, .select-ios, ::-webkit-input-placeholder {
--color: var(--ion-color-lightGray); //color($colors, lightGray);
--max-width: 100%;
}
.ios ion-item {
--background: transparent;
--padding-left: 0;
&:first-child {
--border-top: none;
}
.input-wrapper {
--padding-left: 50px;
input.text-input.text-input-ios {
--color: var(--ion-color-lightGray); //color($colors, lightGray);
}
}
}
[icon-only] ion-icon {
--line-height: 1;
}
}
}
}
There are a few things which are not styled correctly:
I thought I had to replace the most Ion specific components with ion- in front of it, for content this seems to work but the form targeting this does not seem to work (ion-form), while form (liek it used to be) also doesn't work. Any clues with what I should replace this? Or should I omit the form targeting and just keep it in ion-content?
There is also some html inline styling going on, I don't know if all these styles are still correctly used in Ionic 4? For example, I have read somewhere that I should replace padding text-center with class="ion-padding ion-text-center" but what about the inline col-x and offset-x styles?
My Ionic html login page looks as following:
<ion-header [ngClass]="'no-shadow'">
<ion-toolbar transparent>
<ion-buttons start>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-row class="logo-row" *ngIf="isKeyboardHidden">
<ion-col col-8 offset-2 class="ion-padding ion-text-center">
<img id="logo" src="assets/img/logo-dia-positive.png">
</ion-col>
</ion-row>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<ion-row>
<ion-col>
<p style="height: 16px"></p>
</ion-col>
</ion-row>
<ion-list no-lines class="form-inputs">
<ion-item>
<ion-label icon-only>
<ion-icon name="person"></ion-icon>
</ion-label>
<ion-input
type="text"
name="username"
[(ngModel)]="account.username"
[placeholder]="'USERNAME' | translate"
required></ion-input>
</ion-item>
<ion-item>
<ion-label icon-only>
<ion-icon name="unlock"></ion-icon>
</ion-label>
<ion-input
type="password"
name="password"
[(ngModel)]="account.password"
[placeholder]="'PASSWORD' | translate"
required></ion-input>
</ion-item>
</ion-list>
<ion-row>
<ion-col col-10 offset-1>
<ion-button
block
[disabled]="!f.valid || isLoading">
{{'LOGIN' | translate}}
</ion-button>
</ion-col>
</ion-row>
</form>
</ion-content>
<ion-footer *ngIf="isKeyboardHidden">
<ion-row>
<ion-col class="ion-text-center">
<p class="light-gray">
{{'DEVELOPED_BY' | translate}}
<span class="bold">
<a class="default-text"
href="https://www.my-company.com/"
target="_blank">
My Company
</a>
</span>
</p>
</ion-col>
</ion-row>
</ion-footer>
Any ideas or pointers what I am (still) missing?
Here you can find official migration guide. They have listed all controls which they updated and Breaking changes:
https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#breaking-changes
Well, I want to standardize the width equal to the above, but I'm not getting any way ... I've tried margin's, width and others, but none if you want to change the size of the card. I want to leave default, do you recommend me some command or am I doing wrong? all the css commands I did was in home.scss, thank you all.
Watch the print of my app here
page-home {
.bg{
background: linear-gradient(to bottom, #00A399 0%, #fafafa 400%);
}
.bg-ions{
background:#000;
opacity:0.2;
}
.btn{
background:#000;
opacity:0.2;
color:white;
}
ion-input{
color:#FAFAFA;
}
ion-textarea{
color:#FAFAFA;
}
ion-card{
display: flex;
flex-direction: column;
width: 100%;
}
ion-card-content{
margin-left:-2%;
}
ion-item{
width:50%;
}
.summ{
color:#000;
}
::placeholder {
color: white;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: white;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: white;
}
}
<br>
<ion-header>
<ion-navbar>
<ion-title>
HybridSumm
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="bg">
<ion-item class="bg-ions">
<ion-label class="div-pai" color="primary" stacked>Title</ion-label>
<ion-input placeholder="Ex: The Bio-informatics" style="color:white;"></ion-input>
</ion-item>
<br>
<ion-item class="bg-ions">
<ion-label color="primary" stacked >Text</ion-label>
<ion-textarea placeholder="Place the text that you want to summarize." ngDefaultControl [(ngModel)]="test"></ion-textarea>
</ion-item>
<br>
<button ion-button outline style="background: white">Summarize</button>
<button ion-button>Test</button>
<br><br>
<ion-card>
<ion-card-header>
Card Header
</ion-card-header>
<ion-card-content>
{{test}}
</ion-card-content>
</ion-card>
</ion-content>
Ionic set some properties by default, and the only way to override them, is by giving them the !important rule.
It is maybe not the best practice, but it works, and ionic gives us not very much sass variables to overwrite some things.
It works for me adding this in the following SCSS rules in your code:
ion-card{
display: flex;
flex-direction: column;
width: 100% !important;
margin: 0 !important;
}
I hope it works for you.
On the top of the page, I’ve got a div for which background image has been set. I want to place the fab button on the bottom right edge of this div. Exactly like the following image. How can I do this?
Just use the edge attribute that comes along with fabs:
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
For this to work the div (or any tag) having the fab inside must have position set to relative, absolute or fixed to work, position: inherit may work too depending on parent positioning.
Hope this helps.
Thanks to #Garrett and #Gabriel, I got it working using the following markup and scss. It's important to place the FAB button inside the div to which we want to assign the background image so that we can use relative positioning:
<ion-content>
<div id="header">
<ion-fab bottom right edge>
<button ion-fab><ion-icon name="camera"></ion-icon></button>
</ion-fab>
</div>
</ion-content>
And the scss file:
#header {
background-image: url('../assets/images/anonymous.jpg')!important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 25vh;
}
ion-fab {
position: relative;
}
ion-fab[bottom][edge] {
bottom: -21vh;
}
.fab {
margin-right: 3vw;
}
Here is what I could get to work.
This works by creating a fab-container that is going to overlay the main container on this page. For this to work you need to know their heights. Then we make the fab-container z-index of 1 to be on top. Then we can use flex to make the fab be in the bottom right. Then we can add a margin-top half the size of the fab to the fab-container to have the fab hover halfway in-between. Lastly we can add margin-right to get the fab off the right side.
This may not be the best way to do it, since it requires knowing the height of your container, but it was the way that I would approach this task.
<ion-content>
<div class="container"></div>
<div class="fab-conatainer">
<ion-fab class="fab">
<button ion-fab>
<ion-icon name="camera"></ion-icon>
</button>
</ion-fab>
</div>
<div class="contacts-container">
<ion-list>
<ion-item>
<ion-input placeholder="Name"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Phone"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Email"></ion-input>
</ion-item>
</ion-list>
</div>
</ion-content>
CSS
.container {
width: 100%;
background: #333;
height: 500px;
}
.fab-conatainer {
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500px;
z-index: 1;
margin-top: 28px;
}
.fab {
margin-right: 14px;
}
I have this ion-item in my Ionic 3 application. It includes an ion-badge and an ion-button. I want them both to be vertically aligned inside the ion-item. I tried the answers in here, but it didn't work. At the end I need to have these ion-badge and ion-button side by side.
<ion-item>
<ion-badge>150</ion-badge>
<button ion-button>My Button</button>
</ion-item>
Add a class to your ion-item.
HTML:
<ion-item class="my-item">
<ion-badge>150</ion-badge>
<button ion-button>My Button</button>
</ion-item>
And add the following CSS-styles to the ion-label child of your ion-item.
SCSS:
.my-item {
ion-label {
display: flex;
flex-direction: row;
align-items: baseline
}
}
Result:
UPDATE:
Code and result with icon added to the button:
HTML:
<ion-item class="my-item">
<ion-badge>150</ion-badge>
<button ion-button icon-end>My Button
<ion-icon name="arrow-down"></ion-icon>
</button>
</ion-item>
SCSS:
.my-item {
ion-label {
display: flex;
flex-direction: row;
align-items: baseline
}
ion-icon {
margin-left: 5px;
}
}
Also i added a CSS-rule for the <ion-icon> to get som space between the text and the icon in the button.
Result:
Add vertical-align to the styling:
<ion-badge style="vertical-align: bottom;">150</ion-badge>
justify-content: center; will be work!!
ion-badge {justify-content: center; }
Can we change icon from Ionic ion-checkbox ?
Can we use http://ionicons.com/ ?
for now, here my code :
<ion-view>
<ion-content class="has-header">
<ion-list>
<ion-checkbox class="item-checkbox-right">item 1</ion-checkbox>
<ion-checkbox class="item-checkbox-right">item 2</ion-checkbox>
<ion-checkbox class="item-checkbox-right">item 3</ion-checkbox>
Thank you
No, You can't.
As you can see that it is a default icon Set for ion-checkbox. You can only change the css like styling it by change color, background, margin, padding etc.
Alternatively you can change you checkbox to <input type="checkbox> and style it as in ionic.
UPADTED
I have opted pure css solution.
css
input[type="checkbox"] {
display: none;
}
input[type=checkbox]:not(old) + label {
display: inline-block;
padding: 1px;
line-height: 30px;
background:url(https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Empty.png) left top no-repeat;
background-size: 25px 25px;
}
input[type=checkbox]:checked + label { background:url(https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png) left top no-repeat;
background-size: 25px 25px;
}
html
<input type="checkbox" id="1">
<label for="1">Sector 1</label>
Big Thank You #Atula, we cannot change icon from ion-checkbox,
So, with css Ionic icon, here you are my solution (if you have better ? you're welcome) :
Please, help
html
<ion-view>
<ion-content class="has-header">
<div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item1')">
<label>Item1</label><!-- white space
--><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item1']}}"></i></div>
</div>
<div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item2')">
<label>Item2</label><!-- white space
--><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item2']}}"></i></div>
</div>
</ion-content>
</ion-view>
scss
#frameCheckboxHome{
width: 100%;
border-bottom: lightgrey solid 1px;
padding-top: 10px;
padding-bottom: 10px;
label{
width: 80%;
margin: 0px;
vertical-align: middle;
padding-left: 10px;
}
div{
width: 20%;
margin: 0px;
vertical-align: middle;
display: inline-block;
text-align: center;
}
div i{
color: lightgrey;
font-size: 36px;
}
.selected { color: orange; }
}
js with angular meteor 1.3 Ionic
class Home {
constructor($scope, $reactive) {
'ngInject';
$reactive(this).attach($scope);
this.myTab = [];
}
toggle(param){
!this.myTab[param] ? this.myTab[param] = "selected" : this.myTab[param] = "";
}
}
...
.component(name, {
templateUrl: `imports/ui/components/${name}/${template}.html`,
controllerAs: 'homeCtrl',
controller: Home
})
...
Well, you can change the icon for ion-checkbox with a little tweak ;).
Approach
remove the default icon
add a HTML element whose class changes on the ng-model value of ion-checkbox
Code
HTML:
<ion-checkbox class="custom-checkbox" ng-model="itemChecked">
I'm a checkbox
<i class="icon"
ng-class="{'true':'ion-ios-circle-filled', 'false':'ion-ios-circle-outline'}[!!itemChecked]">
</i>
</ion-checkbox>
CSS:
// positioning custom icon properly
.custom-checkbox .icon {
font-size: 20px;
position: absolute;
left: 16px;
}
// hiding default icon
.custom-checkbox i.checkbox-icon {
display: none;
}
Here's the CodePen Demo for it.
My solution:
.checkbox-md {
.checkbox-icon:before {
display: inline-block;
content: "\f219";
font-family: "Ionicons";
font-size: 1.9em;
color: $primary;
}
.checkbox-icon {
background-color: transparent;
border: none;
height: 32px;
&.checkbox-checked:before {
display: inline-block;
content: "\f147";
font-family: "Ionicons";
font-size: 1.9em;
color: $primary;
}
.checkbox-inner {
border: none;
}
}
}