I try this
<ion-item style="padding:0px !important;" >
or html
<ion-item class="no-padding" >
<ion-input [(ngModel)]="siparis.urun.stok_adi" type="text" ></ion-input>
</ion-item>
scss
.no-padding {
padding: 0px !important;
}
but didnt remove input padding
enter image description here
Related
I am trying to show the button on the bottom of page but the issue is its not showing in bottom just showing on the middle not in end.
Here is my .html code
<ion-header no-border>
<ion-toolbar >
<ion-buttons slot="start" style="margin:5px 0px 5px 5px;">
<img src="assets/icon/favicon.png" height="50px">
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="skip()"><p>SKIP</p></ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
<ion-slides pager="true" #mySlider>
<!-- Slide 1 -->
<ion-slide>
<div>
<img src="assets/welcome-slides/portrait.png"/>
<h2>
Capture the moment
</h2>
<ion-label color="gray">
Our photographer will capture the shot in the right place.
</ion-label>
</div>
<ion-button expand="block" class="btn" (click)="swipeNext()">NEXT</ion-button>
</ion-slide>
</ion-slides>
</div>
</ion-content>
.scss
.toolbar-background {
border: none;
}
.btn{
width: 90%;
height: 50px;
position : absolute;
bottom : 0;
left: 5%;
}
ion-slide {
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
}
.bar-header {
background-color: red($color: #000000);
border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
}
I try to set height of slide but dont know why its not working seems like button is in the end of slide but the height is less thats why button is showing in middle.
Try placing your button outside of the <ion-slides> component.
<ion-header no-border>
<ion-toolbar >
<ion-buttons slot="start" style="margin:5px 0px 5px 5px;">
<img src="assets/icon/favicon.png" height="50px">
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="skip()"><p>SKIP</p></ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
<ion-slides pager="true" #mySlider>
<!-- Slide 1 -->
<ion-slide>
<div>
<img src="assets/welcome-slides/portrait.png"/>
<h2>
Capture the moment
</h2>
<ion-label color="gray">
Our photographer will capture the shot in the right place.
</ion-label>
</div>
</ion-slide>
</ion-slides>
<!-- put your button here -->
<ion-button expand="block" class="btn" (click)="swipeNext()">NEXT</ion-button>
<!-- put your button here -->
</div>
</ion-content>
I add a spinner icon in my ionic project, but it doesn't up. I have tried to place the ionic-spinner item in different place in the html file, but it doesn't work. Can you help me to solve this problem?
HTML:
<ion-content>
<form (submit)="doLogin()">
<ion-list>
<ion-item>
<ion-label fixed>{{ 'EMAIL' | translate }}</ion-label>
<ion-input type="email" [(ngModel)]="account.email" name="email"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>{{ 'PASSWORD' | translate }}</ion-label>
<ion-input type="password" [(ngModel)]="account.password" name="password"></ion-input>
</ion-item>
<div padding>
<button ion-button color="primary" block>{{ 'LOGIN_BUTTON' | translate }}</button>
</div>
</ion-list>
</form>
<ion-spinner name="lines"></ion-spinner>
</ion-content>
SCSS:
page-login {
ion-spinner {
width: 28px;
height: 28px;
stroke: #444;
fill: #222;
}
}
We are trying to create a login form with rounded inputs. The problem is that after adding border-radius to inputs the login button becomes longer than inputs themselves. Here is the code:
<div class="appForm" ion-fixed padding margin-bottom style="position: absolute !important; top: 0%; bottom: 0%; left: 0; margin-bottom: 1%;">
<div class="logo">
<h2>Chat App</h2>
</div>
<ion-list style="margin-top: 43% !important">
<ion-item style="">
<ion-input class="input-field" [(ngModel)]="email" name="username" type="text" placeholder="Email"></ion-input>
</ion-item>
<ion-item>
<ion-input class="input-field" [(ngModel)]="password" name="password" type="password" placeholder="Password"></ion-input>
</ion-item>
<button ion-button block class="login-button" (click)="LoginUser()">Login</button>
<p class="signin">
<button ion-button block clear (click)="RegisterPage()">Sign Up</button>
</p>
</ion-list>
</div>
Also here are the styles:
ion-item {
background-color:transparent !important
}
.input-field {
border:2px solid;
border-radius: 20px;
color: color($colors, light) !important;
}
.login-button {
text-transform: none;
border-radius: 20px;
background:linear-gradient(to right, #DD2476, #FF512F);
color: color($colors, light);
margin-top:15px !important;
}
...
...
How can we make the login button on the same width as inputs?
As you added your ion-input in ion-item it will add default 16px padding from left.
So either you add your button into <ion-item> like below
<ion-item>
<button ion-button block class="login-button" (click)="LoginUser()">Login</button>
</ion-item>
Or you can override ion-item style and change or remove padding like below
default padding : padding-left: 16px;
ion-item {
background-color:transparent !important;
padding-left: 0px;
}
By doing this you can find your ion-input same like login button.
Hope this will helps!
I want an ion-select and ion-input in same line with width as follows:
ion-select 10% width
ion-input 10% width
I wrote the following code for that (Stackblitz):
<div style="display: flex">
<ion-item style="width:10%">
<ion-label>+2</ion-label>
<ion-select>
<ion-option value="1">+1</ion-option>
<ion-option value="2">+2</ion-option>
<ion-option value="3">+3</ion-option>
</ion-select>
</ion-item>
<ion-item style="width:90%">
<ion-input [value]="23321312321"></ion-input>
</ion-item>
</div>
But unfortunately, upon doing so text of ion-select disappears.
How do I achive this.
You can use width / max-width property to set your ion-item width to 10%. what you need to add is !important as ion-item already have its default style so to overwrite style we need to make our style important.
max-width: 10% !important;
width: 10% !important;
Please check below code:
<div style="display: flex">
<ion-item style="max-width: 14% !important;">
<!-- <ion-label>+2</ion-label> -->
<ion-select style="max-width: 100% !important;">
<ion-option value="1">+1</ion-option>
<ion-option value="2">+2</ion-option>
<ion-option value="3">+3</ion-option>
</ion-select>
</ion-item>
<ion-item style="max-width: 84% !important;">
<ion-input [value]="23321312321"></ion-input>
</ion-item>
</div>
<div>hello</div>
Adjust your Ion-item width as per your requirement.
Hope this will helps.
I need to have a fixed element on a page, and then a scrollable list.
I added a ion-content inside the first ion-content. But it doesn't scroll.
<ion-view title="Bayonne" hide-back-button="true" id="page5" style="background-color:#1B463C;">
<ion-content scroll="true" padding="false" class="has-header">
<div>
<img src="img/cQzLvAwuSqCLeyZHzhBd_map.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
</div>
<div id="bayonne-button-bar1" class=" button-bar ">
<button id="bayonne-button1" style="border-radius:0px 0px 0px 0px;" class=" button button-assertive button-block buttonnomargin">Lieux</button>
<a ui-sref="circuits" id="bayonne-button2" style="border-radius:0px 0px 0px 0px;" class=" button button-dark button-block buttonnomargin">Circuits</a>
</div>
<ion-content id="contentInside">
<ion-list id="bayonne-list2">
<ion-item class="item-thumbnail-left " id="bayonne-list-item12" ui-sref="rempart">
<img src="img/S6OgBxiMQdSttmcgQNFJ_old.png">
<h2>Parc de la Poterne</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item11" ui-sref="rempart">
<img src="img/0CoPf6OkTGWKNa0SUvI1_rempart.jpg">
<h2>Parc de la Poterne</h2>
</ion-item>
<ion-item class="item-thumbnail-left item-icon-right " id="bayonne-list-item7">
<img src="img/St3jeK3kRVC7bY3TODRt_tour.png">
<h2>Château-Vieux</h2>
<i class="icon ion-android-walk"></i>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item13">
<img src="img/1E4YdOePR62V8ZoECOuL_cloitre.jpg">
<h2>Cloître</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item5">
<img src="img/sDFRnANETvaagk5B01nZ_bayonne_cathedrale_et_cloitre_03-05-2012___11.JPG">
<h2>Cathédrale</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item6">
<img src="img/n3OwTRCOTDSW1V7q2Z3R_reduit.jpg">
<h2>Place du Réduit</h2>
</ion-item>
<ion-item class="item-thumbnail-left " id="bayonne-list-item14">
<img src="img/qeuF4erGTQOtqvgTUOD1_escalier.jpg">
<h2>Escaliers</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-content>
You cannot have a ion-content inside another ion-content it's not a good practice.
If you want a content to be static you can use ion-header with subheader class.
<ion-header class="bar bar-subheader">
<div>
<img src="img/cQzLvAwuSqCLeyZHzhBd_map.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
</div>
<div id="bayonne-button-bar1" class=" button-bar ">
<button id="bayonne-button1" style="border-radius:0px 0px 0px 0px;" class=" button button-assertive button-block buttonnomargin">Lieux</button>
<a ui-sref="circuits" id="bayonne-button2" style="border-radius:0px 0px 0px 0px;" class=" button button-dark button-block buttonnomargin">Circuits</a>
</div>
Now the image and button will be static in the header.
NOTE:
It is must to include has-subheader class in ion-content.
<ion-content class="has-subheader">
"Your content goes here"
</ion-content>