I have a form with a ui-select in a bootstrap grid.
I want my ui-select to be as wide as the input below it.
Here is my code
<div class="col-md-12">
<div class="col-md-6 form-group">
<label class="col-md-4" style="text-align:right;">Pays</label>
<div class="col-md-8">
<ui-select ng-model="adresse.pays" theme="select2" ng-disabled="disabled" ame="pays">
<ui-select-match placeholder="Sélectionnez un pays..." allow-clear>{{$select.selected.nom}}</ui-select-match>
<ui-select-choices repeat="pays in payss | propsFilter: {nom : $select.search}">
<div ng-bind-html="pays.nom | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="col-md-6">
<label class="col-md-4" style="text-align:right;">Mail</label>
<input type="text" class="col-md-3 input-sm"
ng-model="adresse.mail">
</div>
</div>
<div class="col-md-12">
<div class="form-group col-md-6">
<label class="col-md-4" style="text-align:right;">Code adresse client</label>
<input type="text" class="col-md-8 input-sm"
ng-model="adresse.codeAdresseClient" name="codeAdresse">
</div>
<div class="form-group col-md-6">
<label class="col-md-4" style="text-align:right;">Interlocuteur</label>
<input type="text" class="col-md-3 input-sm"
ng-model="adresse.interlocuteur" name="interlocuteur">
</div>
</div>
This code produces this:
If someone knows how to do that...
Thanks in advance.
My suggestion is to either
use bootstrap theme (instead of select2), or
simply set width to 100%
Check this plunk: http://plnkr.co/edit/9mI8nO?p=preview
<ui-select ng-model="person.selected" theme="bootstrap">
...
</ui-select>
<ui-select ng-model="person.selected" theme="select2" style="width:100%">
...
</ui-select>
.ui-select-multiple input.ui-select-search {
width: auto !important;
}
Related
SO i m trying to add input forms with different column width ..
Below is my code:
`<
div class="row">
<div class="col-md-10">
<div class="form-group form-inline col-md-6 col-lg-4">
<input type="text" name="cw" id="inputammino" value="A">
</div>
<div class="form-group form-inline col-md-4 col-lg-4">
<input type="text" name="cw2" id="inputcusti" value="42.010565">
</div>
<div class="form-group form-inline col-md-2 col-lg-4">
<input type="text" name="cw3" id="amiaci" value="K">
</div>
</div>
</div>
`
But instead of adding more column width to first column its adding it to last..What am I doing wrong?
I am using Bootstrap 3.3.7 and I have formatted your HTML as below by using BootStrap 3.3 Documentation and its working fine for me.
<div class="form-inline">
<div class="form-group">
<div class="col-md-6">
<input type="text" name="cw" id="inputammino" value="A">
</div>
<div class="col-md-4">
<input type="text" name="cw2" id="inputcusti" value="42.010565">
</div>
<div class="col-md-2">
<input type="text" name="cw3" id="amiaci" value="K">
</div>
</div>
</div>
I'm using MaterializeCSS for creating layouts, I've got a container which contains 2 rows but any content which is not in column displays outside of container.
Here is my code:-
<div class="container">
<div style="border: 1px solid #b1b1b1;">
<div class="row">
<div class="col s12">Hello</div>
</div>
<div class="row">World
<div class="col s12">Hello</div>
</div>
</div>
</div>
And here is how it looks:-
Container Layout
Why is this happening even though my content is inside container and should also display within container boundaries?
Edit:
<div class="add-arena grey lighten-3">
<div class="row">
<div class="col s12 center deep-orange white-text">Add Arena</div>
</div>
<div class="row">
<div class="add-arena-image-holder col s4">
<form action="#">
<div class="file-field input-field col s11">
<div class="btn">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
</div>
<div class="add-arena-description col s8">
<div class="row">
<div class="input-field col s6">
<input placeholder="What will it be called?" id="first_name" type="text" class="validate">
<label for="first_name">Arena Name</label>
</div>
<div class="input-field col s6">
<input placeholder="Arena Number" id="first_name" type="text" class="validate">
<label for="first_name">Arena</label>
</div>
</div>
<div class="row">
<div class="col s3 right">
<a class="waves-effect waves-light btn deep-orange"><i class="material-icons left">send</i>Add</a>
</div>
</div>
</div>
</div>
</div>
All content should be in the actual cols as the rows apply negative margins to stretch them to the full width. Always put the content in the col's.
https://codepen.io/anon/pen/EXZzVr
<div class="container">
<div style="border: 1px solid #b1b1b1;">
<div class="row">
<div class="col s12">Hello</div>
</div>
<div class="row">
<div class="col s12">Hello World</div>
</div>
</div>
</div>
What exactly do you want to achieve?
Take a look at following lines:
https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/sass/components/_grid.scss#L17-L18
https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/dist/css/materialize.css#L3367-L3368
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 am integrating Bootstrap 3 with Kendo UI controls.
I am having alignment issues with multiple form-horizontal sections, here is the HTML
<ul id="acc-form-panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">Project Info</span>
<section style="padding:10px 0;">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="procod">Project Code</label>
<div class="col-sm-8">
<input id="procod" style="width: 25%;"/>
</div>
</div>
</div>
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="proshocod">Project Short Code</label>
<div class="col-sm-8">
<input id="proshocod" style="width: 25%;"/>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="form-horizontal form-widgets col-sm-12">
<div class="form-group">
<label class="control-label col-sm-2" for="protit">Project Title</label>
<div class="col-sm-10">
<input id="protit" style="width: 75%;" />
</div>
</div>
</div>
</section>
</li>
<li class="">
<span class="k-link">Users Info</span>
<div class="row" style="margin: 20px 0;">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-3" for="name">Name</label>
<div class="col-sm-8">
<input id="name" value="Bilal Haidar" style="width: 75%;" /> <!-- styles="width:100%;" -->
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="birthday">Birthday</label>
<div class="col-sm-8">
<input id="birthday" type="date" value="10/09/1979" style="width: 75%;" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="gender">Gender</label>
<div class="col-sm-8">
<select id="gender" style="width: 75%;"><option value="Male" selected="selected">Male</option><option value="Female">Female</option></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="language">Language</label>
<div class="col-sm-8">
<select id="language" style="width: 75%;"><option value="English" selected="selected">English</option><option value="German">German</option></select>
</div>
</div>
</div>
</div>
</li>
</ul>
Anyone can tell me what's wrong with the alignment?
Thanks
First I will advice you strip your code of all inline styles, and the put every successive that should be on the same column in a div / section of class row. Bootstrap is based on the 12-grid system. That means once 12 columns are complete, the last element is dropped to a new line. Try these and see what will happen.
I wish to have labels right-aligned next to its input box (with a space in between). However, labels are still left-aligned. According to Boostrap3 documentation and this question, the form-horizontal class should be used, but still result is not right.
The django template code below does generate fields in a two-column fashion, but with left-aligned labels:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.code|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-2 input-md">
{{ form.name|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.company|bootstrap_horizontal }}
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
I guess I'm missing something. Thanks in advance for your help.
EDITED:
Output HTML in jsfiddle.
Image of actual output included as well in this link. As you can see, Code & Company are left-aligned.
I think your text is right-aligned but the effect is not visible due to the nesting of your grid classes.
Try something like:
<form class="form-horizontal container" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Code</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
<label for="inputPassword1" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Company</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
When you nest your grid classes (col--) a child get a percentage of the width of its parent. When you nest a col-lg-6 in a col-lg-6 its with will be 25% of the viewport 50% of 50%.
In the case you want to input next to each other with a float left (your col-- classes add this float) they can't be in different input-groups. The .from-group has a clearfix which undo the float left. So try something like:
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company 2</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>