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.
This question is related to
css
ionic-framework
The answer is
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>
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
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>
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>
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>_x000D_
<button ....>1</button>_x000D_
<button ....>2</button>_x000D_
<button ....>3</button>_x000D_
</ion-buttons>And if we want to align a checkbox to the right, we can use item-end.
<ion-checkbox checked="true" item-end></ion-checkbox>
Ultimately, we are trying to get to this.
<div style="display: flex; justify-content: center;">
<button ion-button>Login</button>
</div>
Source: Stackoverflow.com