Menu
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.
789
Answer: Use the text-center Class You can simply use the built-in class . text-center on the wrapper element to center align buttons or other inline elements in Bootstrap.
You can use ionic CSS utilities to align center by applying the attribute text-center to the parent element of the one you want to center horizontally. In your case I would wrap the <img> in a <div> so that it affects only the image and not the <p> elements. Show activity on this post.
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
116
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
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
