How can I align button in Center or right using IONIC framework?
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.
Answer
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