Preety Sapra Preety Sapra - 3 months ago 80
CSS Question

How can I align button in Center or right using IONIC framework?

enter image description here

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

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