I have as part of a form this contact information section:
<div class="row">
<div class="col s12">
<i class="material-icons prefix">account_circle</i>
<input id="nameico" type="text" class="validate">
<label for="nameico">Contact Name</label>
</div>
<div class="col s12">
<i class="material-icons prefix">email</i>
<input id="emailico" type="email" class="validate">
<label for="emailico">Contact Email</label>
</div>
<div class="col s12">
<i class="material-icons prefix">phone</i>
<input id="telico" type="tel" class="validate">
<label for="telico">Contact Phone</label>
</div>
</div>
However all three label are overlapping each other all inside the first input field for the persons name.
Here is my Code may be it can help you.
JSFiddle link - JSFiddle
HTML Code -
<div class="row">
<div class="col s12 input-field">
<i class="material-icons prefix">account_circle</i>
<input id="nameico" type="text" class="validate">
<label for="nameico">Contact Name</label>
</div>
<div class="col s12 input-field">
<i class="material-icons prefix">email</i>
<input id="emailico" type="email" class="validate">
<label for="emailico">Contact Email</label>
</div>
<div class="col s12 input-field">
<i class="material-icons prefix">phone</i>
<input id="telico" type="tel" class="validate">
<label for="telico">Contact Phone</label>
</div>
</div>
Related
I want to put + and - buttons inside input box but bootstraps input-group-btn property is not working in materialize CSS framework
<div class="row marg">
<h6 class="small">Selling Quantity</h6>
<div class="input-field input-group col s12">
<span class="suffix btn-number" data-type="minus" data-field="num">
<a class="waves-effect waves-light ">
<i class="material-icons grey-text text-darken-1 left">remove</i>
</a>
</span>
<input type="text" name="num" class="form-control input-number" value="">
<span class="suffix btn-number" data-type="plus" data-field="num">
<a class=" waves-effect waves-light "><i class="material-icons grey-text text-darken-1 left">add</i></a>
</span>
</div>
</div>
There is no class like "input-group" in Materialize.
Bootstrap and Materialize differ in class names.
Check their Forms.html - http://materializecss.com/forms.html
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">phone</i>
<input id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Telephone</label>
</div>
</div>
</form>
I am trying to divide 4 radio buttons into two lines using bootstrap 4 alpha6, but I can't:
<div id="payment-table" class="row">
<div class="col-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
<img src="imgs/cash.png">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
<img src="imgs/visa.png">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
<img src="imgs/split.png" id="split">
</label>
<label class="btn btn-primary">
<input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
<img src="imgs/master.png">
</label>
</div>
</div>
</div>
Here's what I get:
I tried to remove "btn-group" class, and I get:
And I can't align them to fit full width, as I want two radio buttons per line, and each line has full width with 50% for each radio button.
I tried to give each one "col-6", and here's what I get:
Any suggestion?
actually we need to use only col class. by nesting we determine how many columns will be there.
Try this
.btn-primary {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="payment-table" class="row">
<div class="col">
<div class="" data-toggle="buttons">
<div class="row">
<div class="col">
<label class="btn btn-primary active col">
<input type="radio" name="paymentMethod" data-id="1" checked autocomplete="off">
<img src="imgs/cash.png">
</label>
</div>
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="2" autocomplete="off">
<img src="imgs/visa.png">
</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="3" autocomplete="off">
<img src="imgs/split.png" id="split">
</label>
</div>
<div class="col">
<label class="btn btn-primary col">
<input type="radio" name="paymentMethod" data-id="4" autocomplete="off">
<img src="imgs/master.png">
</label>
</div>
</div>
</div>
</div>
Hope this helps!
I have this login form and I want to center align the button but I can't seem to align it perfectly. What's the best way to center align it?
<form class="col s12">
<div class="row">
<div class="input-field col s10 offset-s1">
<input id="last_name" type="text" class="validate">
<label for="last_name">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s10 offset-s1">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="col s6 offset-s4">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
Please help. Thank you!
Make your div containing the button the same width as your form inputs and then simply add the center-align class like so:
<form class="col s12">
<div class="row">
<div class="input-field col s10 offset-s1">
<input id="last_name" type="text" class="validate">
<label for="last_name">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s10 offset-s1">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<!-- CHANGED THE DIV BELOW (Changed size to col s10 offset-s1
to match the divs above and added center-align -->
<div class="col s10 offset-s1 center-align">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
Try to add the attribute text-align: center; to the button container.
To do so I've added a class and included the css in the code below.
<style>
.center-text {
text-align: center;
}
</style>
<form class="col s12">
<div class="row">
<div class="input-field col s10 offset-s1">
<input id="last_name" type="text" class="validate">
<label for="last_name">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s10 offset-s1">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="col s6 offset-s4 center-text">
<button class="btn waves-effect waves-light" type="submit" name="action">
Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
I have a simple form and want it to be horizontal on medium an large devices and vertical on small devices with twitter-bootstrap-3.
I got it working responsive, but it's not switching to vertical style on small devices.. Isn't that possible?
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-1 col-md-10">
<form method="POST" action="...url.." class="form-horizontal">
<div class="form-group">
<label for="telefon" class="control-label col-xs-3">Telefon</label>
<div class="col-xs-8">
<input type="text" name="telefon" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-xs-3">Email</label>
<div class="col-xs-8">
<input type="email" name="email" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
http://jsfiddle.net/quyw5fnL/
EDIT:
I want it to look like this on large screens:
Label1: Inputbox1
Label2: Inputbox2
And on small Screens like this:
Label1:
Inputbox1
Label2:
Inputbox2
Just realized that there was never a correct answer given. Perhaps it's just to easy, but for the sake of completion and all who are stumbling over this, here is the simple answer:
<form method="POST" action="...something..." class="form-horizontal">
<div class="form-group">
<label for="" class="col-xs-12 col-sm-3 control-label">Name</label>
<div class="col-xs-12 col-sm-9">
<p class="form-control-static">John Muller</p>
</div>
</div>
<div class="form-group">
<label for="town" class="col-xs-12 col-sm-3 control-label">Town</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="town" class="form-control " placeholder="" value="New York">
</div>
</div>
<div class="form-group">
<label for="something" class="col-xs-12 col-sm-3 control-label">Something else</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="something" class="form-control " placeholder="" value="Got it">
</div>
</div>
</form>
The important part is to set col-xs-12 and col-sm-3 on the label and col-xs-12 and col-sm-9 on the input.
Fiddle
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-offset-1 col-md-10">
<form method="POST" action="...url.." class="form-inline">
<div class="form-group">
<label for="telefon" class="">Telefon</label>
<input type="text" name="telefon" class="form-control">
</div>
<div class="form-group">
<label for="email" class="">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
I have bootstrap form where I need to fix two element alignment. Screenshot show the current look of the form http://s27.postimg.org/j8h3d0203/screen2.png by using the following markup
<fieldset class="col-md-8">
<div class="form-group">
<label for="BI16" class="col-md-4 control-label">Visual Acuity L:20/:</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control" />
</div>
<label for="BI16" class="col-md-2 control-label">R: 20/</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control"/>
</div>
</div>
<div class="form-group">
<div>
<yesno-button button1="yes" button2="no" id="B19" value1="BV8" value2="BV9"></yesno-button>
<label for="B19" class="radio-inline control-label">
Creative Lens Used?
</label>
</div>
</div>
<div class="form-group">
<div>
<yesno-button button1="yes" button2="no" id="B20" value1="BV6" value2="BV7"></yesno-button>
<label for="B20" class="radio-inline control-label">
Will the patient consent to an End of Life Planning discussion?
</label>
</div>
</div>
<div class="form-group">
<div>
<label for="B12" class="col-md-2 control-label">Comments:</label>
<div class="col-md-10">
<input type="text" id="B12" class="form-control" />
</div>
</div>
</div>
</fieldset>
Which form do you want to align? You can use
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>