I'm trying to display element like this image But when I wrap in <ion-item> it display like this image .What should I do to change it.. I've using display:block but it not working.
page
<ion-list>
<ion-item>
<h2>Name</h2>
<div>
<ion-input placeholder="Name" [(ngModel)]="name"></ion-input>
</div>
</ion-item>
</ion-list>
Use Position attribute:
<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input></ion-input>
</ion-item>
I´m trying to set the background color of a page in ionic project to two different colors, but this page have an element on it, so i´m having problems with it. The html code of the page is this:
<ion-content>
<div style="height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;">
<ion-card>
<ion-card-header>
<ion-toolbar>
<ion-title>
<ion-item-divider>
<ion-label>
<img width="150" src = "./assets/images/logo.png">
</ion-label>
</ion-item-divider>
<ion-label>
<br/>Acceder
</ion-label>
</ion-title>
</ion-toolbar>
</ion-card-header>
<ion-card-content padding = "true">
<form #form="ngForm" method="post">
<ion-item>
<ion-input [(ngModel)] = "postData.username" type="text" name="username" placeholder="Usuario"></ion-input>
</ion-item>
<ion-item>
<ion-input [(ngModel)] = "postData.password" type="password" name="password" placeholder="Contraseña"></ion-input>
</ion-item>
<ion-item lines ='none'>
<a routerLink='/signup'>Create account</a>
</ion-item>
<ion-button expand="block" share = "round" color="primary" (click) ="loginAction()">Login</ion-button>
</form>
</ion-card-content>
</ion-card>
</div>
</ion-content>
Sorry for my english, is not my mother tongue
I have created a simple chat form in Ionic.
Problem: Buttons are going out of screen.
It looks like this this -
My chat.html
<ion-header>
<ion-navbar>
<ion-title>communicationgiven</ion-title>
<button ion-button (click)="close()" style="margin-left: 90%;margin-top: -3%">Close</button>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<div>
<p *ngFor="let list of list; let i = index;">
<ion-item>
<!-- <p style="color: #1bb0f4;font-size: 20px;">Tagto {{list.TAG_TO}}</p> -->
<p style="color: #1bb0f4;"> {{list.TAG_FROM}}</p>
<p style="color: #d2dce1;"> {{list.TAG}}</p>
</ion-item>
</p>
</div>
</ion-list>
</ion-content>
<ion-footer class="footer">
<form #com="ngForm" (submit)="onsubmit(com.value)">
<ion-input placeholder="TAG" type="text" name="TAG" ngModel ></ion-input>
<button ion-button type="submit" style="margin-left: 90%;margin-top: -5%;">Submit</button>
</form>
</ion-footer>
I want to know why my buttons are going out of the page; how can I make sure they stay inside the screen, irrespective of the screen size?
What is the best practice here? I am fairly new in CSS.
You have to use below code for left button
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Page Title
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="openModal()">
<ion-icon name="options"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
For footer you can use ion-grid
<ion-footer class="footer">
<form #com="ngForm" (submit)="onsubmit(com.value)">
<ion-grid>
<ion-row>
<ion-col col-9>
<ion-input placeholder="TAG" type="text" name="TAG" ngModel ></ion-input>
</ion-col>
<ion-col col-3>
<button ion-button type="submit">Submit</button>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-footer>
For more info please refer this
https://ionicframework.com/docs/api/components/toolbar/Navbar/
you had given style="margin-left: 90% that is margin from left side is 90% so obviously it will go out of screen, try to decrease the value.
It's hard to answer this one as I can't replicate the issue locally with what you've provided.
I'd start by reducing the margin-left: 90% on the button element, see how that goes.
In regard to best practices, an important one is to not use inline styles. That is putting styles in the style html attribute. Instead try using an external style sheet or at least an internal style sheet, see: https://www.w3schools.com/css/css_howto.asp
I am trying to add search bar into header on one of the page.
<ion-view view-title="">
<ion-nav-buttons side="left">
<label class=" item item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</ion-nav-buttons>
<ion-content>
Search content
</ion-content>
</ion-view>
The search bar does show up in the header as expected. But how can I get the search field to be 100% width across the header? I did try to apply:
.buttons-left, .left-buttons{
width:100% !important;
}
It does work. But the problem is it affect all other pages as well. I tried to add class and id to ion-nav-buttons, but it doesn't shows up.
How can I apply custom width to ion-nav-buttons only on specific page?
I am not sure if that is the best place where to put a search field:
<ion-nav-buttons>
You can define a custom header for your specific view:
<ion-header-bar class="bar-positive">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" class="search-bar">
</label>
<button class="button button-clear">Cancel</button>
</ion-header-bar>
and use the directive hide-nav-bar="true" in your view to tell the current view to hide the navbar:
<ion-view view-title="home" hide-nav-bar="true">
...
</ion-view>
This is your end result:
<ion-view view-title="home" hide-nav-bar="true">
<ion-header-bar class="bar-positive">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" class="search-bar">
</label>
<button class="button button-clear">
Cancel
</button>
</ion-header-bar>
<ion-content padding='true' scroll='false' has-footer='false'>
<div class="card">
<div class="item item-text-wrap">
HOME PAGE
</div>
</div>
</ion-content>
</ion-view>
I've also used some styling to change the result:
.search-bar
{
width:100% !important;
background: inherit;
height: inherit !important;
}
and this is how it looks in a Plunker.
I want the login and register button in right,and Search button in Center, I searched alot but didn't get any solution.
And also how can I align text area in a proper position.
Here is my html code:
<body ng-app="starter">
<ion-pane style = "background-color:#4992E2;">
<ion-header-bar class="bar bar-subheader" style = " margin-top: -35px; background-color:#F9F9F9;">
<h1 class="title" style = "color:black;">NetHealth Appointment Booking</h1>
</ion-header-bar>
<ion-content >
<div class = "row center">
<div class="col">
<button class="button button-small button-light" >
Login!
</button>
<button class="button button-small button-light">
Register Here!
</button>
</div>
</div>
<div class="item-input-inset">
<h4>Date</h4>
<label class="item-input-wrapper">
<input type="text" placeholder="Text Area">
</label>
</div>
<div class="item-input-inset">
<h4>Suburb</h4>
<label class="item-input-wrapper">
<input type="text" placeholder="Text Area">
</label>
</div>
<div class="item-input-inset">
<h4>Clinic</h4>
<label class="item-input-wrapper">
<input type="text" placeholder="Text Area">
</label>
</div>
<button class=" center button button-small button-light">
Search
</button>
</ion-content>
</ion-pane>
</body>
I know in the bootstrap, but I am new to ionic, please tell me how can I do this.
You should put the button inside a div, and in the div you should be able to use the classes: text-left, text-center and text-right.
for example:
<div class="row">
<div class="col text-center">
<button class="button button-small button-light">Search</button>
</div>
</div>
And about the "textarea" position:
<div class="list">
<label class="item item-input">
<span class="input-label">Date</span>
<input type="text" placeholder="Text Area">
</label>
Demo using your code:
http://codepen.io/douglask/pen/zxXvYY
Css is going to work in same manner i assume.
You can center the content with something like this :
.center{
text-align:center;
}
Update
To adjust the width in proper manner, modify your DOM as below :
<div class="item-input-inset">
<label class="item-input-wrapper"> Date
<input type="text" placeholder="Text Area" />
</label>
</div>
<div class="item-input-inset">
<label class="item-input-wrapper"> Suburb
<input type="text" placeholder="Text Area" />
</label>
</div>
CSS
label {
display:inline-block;
border:1px solid red;
width:100%;
font-weight:bold;
}
input{
float:right; /* shift to right for alignment*/
width:80% /* set a width, you can use max-width to limit this as well*/
}
Demo
final update
If you don't plan to modify existing HTML (one in your question originally), below css would make me your best friend!! :)
html, body, .con {
height:100%;
margin:0;
padding:0;
}
.item-input-inset {
display:inline-block;
width:100%;
font-weight:bold;
}
.item-input-inset > h4 {
float:left;
margin-top:0;/* important alignment */
width:15%;
}
.item-input-wrapper {
display:block;
float:right;
width:85%;
}
input {
width:100%;
}
Demo
To use center alignment in ionic app code itself, you can use the following code:
<ion-row center>
<ion-col text-center>
<button ion-button>Search</button>
</ion-col>
</ion-row>
To use right alignment in ionic app code itself, you can use the following code:
<ion-row right>
<ion-col text-right>
<button ion-button>Search</button>
</ion-col>
</ion-row>
Ultimately, we are trying to get to this.
<div style="display: flex; justify-content: center;">
<button ion-button>Login</button>
</div>
And if we want to align a checkbox to the right, we can use item-end.
<ion-checkbox checked="true" item-end></ion-checkbox>
Another Ionic way. Using this ion-buttons tag, and the right keyword puts all the buttons in this group to the right. I made some custom toggle buttons that i wanted on one line, but the group to be right justified.
<ion-buttons right>
<button ....>1</button>
<button ....>2</button>
<button ....>3</button>
</ion-buttons>
I Found the esiest soltuion just wrap the button with div and put text-center align-items-center in it like this :
<div text-center align-items-center>
<buttonion-button block class="button-design " text-center>Sign In </button>
</div>
center tag aligns the buttons within it as expected:
<ion-footer>
<ion-toolbar>
<center>
<button royal>
Contacts
<ion-icon name="contact"></ion-icon>
</button>
<button secondary>
Receive
<ion-icon name="arrow-round-back"></ion-icon>
</button>
<button danger>
Wallet
<ion-icon name="home"></ion-icon>
</button>
<button secondary>
Send
<ion-icon name="send"></ion-icon>
</button>
<button danger>
Transactions
<ion-icon name="archive"></ion-icon>
</button>
<button danger>
About
<ion-icon name="information-circle"></ion-icon>
</button>
</center>
</ion-toolbar>
</ion-footer>