I'm trying to force a <label/> and its <input/> to stay on the same line.
I'm using the form-control class to make the <input/> pretty. However, when I do so, it REALLY wants to put itself on a separate line. I'm avoiding using rows and columns because I want the label right next to the textbox, not to move around depending on the size of the screen.
<div>
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
I want this:
Search [______________________]
I get this:
Search
[_____________________]
How do I force them to stay on the same line?
http://embed.plnkr.co/qA2s5RGRpvfRa7rhiq1n/preview
What you are looking for is referred by Bootstrap as an inline form or horizontal form.
<form class="form-inline" role="form">
<div class="form-group">
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
</form>
Make sure your form has the form-inline class on it and realistically they should be wrapped in a form-group. The inline form make everything in one line.
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Search</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</form>
When using form-horizontal, the form-group acts like a row, so you can move content to separate lines :) With that, you would need to use grid properties so the label/input is properly aligned.
Related
i've been searching for this and couldn't find any answers specific for my need:
I have a really big form, which i want to slice in components. My form looks like this:
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
<div ngModelGroup="someInfo">
<input type="text" ngModel>
<input type="text" ngModel>
</div>
<div ngModelGroup="someOtherInfo">
<input type="text" ngModel>
<select ngModel>SomeOptions</select>
</div>
</form
I want to create separate components for these groups so when i check form.value it sees the groups, something like this:
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
<some-info-component ngModelGroup="someInfo"></some-info-component>
<some-other-info-component ngModelGroup="someOtherInfo"></some-other-info-component>
</form>
so how do i make this work, when i try to access form.value.someInfo it is empty object, i've tried with ControlValueAccessor but it only works when i give these components [ngModel] but not with ngModelGroup
This is a very simple and probably scilly question but I can't figure it out. I need a label to be on the same line as the associated select, using Bootstrap CSS. The select keeps 'jumping' below the label if I reduce window's width. How is it possible to control this behaviour using Bootstrap classes? I would need to keep both on the same line, whatever window's width is.
Code sample:
<form class="form-inline">
<div class="form-group">
<label for="example">Year</label>
<select class="form-control" id="example">
<option>2016</option>
<option>2015</option>
</select>
</div>
</form>
See on JS Fiddle here.
Your current solution is default, but you could also make use of columns inside the form. In the next article in bootstrap columns are used, see: http://getbootstrap.com/css/#forms-horizontal
What you are looking for is:
<form class="form-horizontal">
<div class="form-group">
<label for="example" class="col-xs-2 control-label">Year</label>
<div class="col-xs-10">
<select class="form-control" id="example">
<option>2016</option>
<option>2015</option>
</select>
</div>
</div>
</form>
I Wanted to know if a <form> can contain many <fieldset> in it? Or is it better to use <div> instead? In my case, I want to design a sophisticated responsive designed <form> with many different kinds of <input>.' And if so, do theshould be in his own` alone?
Better like this :
<form action="#" method="POST">
<fieldset id="input1-wrapper">
<h3>Input 1</h3>
<input type="texte" name="input1" placeholder="input1">
</fieldset>
<fieldset id="input2-wrapper">
<h3>Input 2</h3>
<input type="texte" name="input2" placeholder="input2">
</fieldset>
</form>
Or like this :
<form action="#" method="POST">
<div id="input1-wrapper">
<h3>Input 1</h3>
<input type="texte" name="input1" placeholder="input1">
</div>
<div id="input2-wrapper">
<h3>Input 2</h3>
<input type="texte" name="input2" placeholder="input2">
</div>
</form>
Multiple Fieldsets in a form are allowed. Example: Data entry fields in one fieldset and action buttons ('submit,' 'cancel' etc.) in a separate fieldset.
Fieldset should always have a legend tag according to the standards.
Actually, Fieldsets are just another 'display' block level element. i.e. think of it as a 'fancy div'. It can be used anywhere a 'block level element' can. It has no 'special knowledge' of what is inside it. As the 'legend' is a separate element that it can be styled individually with CSS.
being pedantic ;-/
www.whatwg.org/specs/web-apps/current-work/multipage/forms
Extracted text: ' ..., one can use the fieldset element. The title of such a group of controls is given by the first element in the fieldset, which has to be a legend element.'.
It looks a lot nicer that a 'div' with headings, in my opinion. To the point that I use it outside of forms for grouping things. Try getting that text in the border with CSS.
<form action="#" method="POST">
<fieldset id="input1-wrapper">
<legend>Input 1</legend>
<input type="text" name="input1" placeholder="input1">
</fieldset>
<fieldset id="input2-wrapper">
<legend>Input 2</legend>
<input type="text" name="input2" placeholder="input2">
</fieldset>
</form>
With Bootstrap 3, form input element size does not change as specified by size attribute, code snippet:
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" size="50">
I understand that there are workarounds to shorten the length of an input element but, help me understand why doesn't it work with size attribute of input element?
Working code at bootply.
Thanks!
There are a couple things you could do. You could use Bootstrap's col-* classes to change how your form lays out, or you can either modify the CSS or add inline styles to your inputs (such as <input ... style="width:200px;">).
I would personally try to use the col-* classes for consistency, even though it adds a bit more markup to your pages. As an example, something like this:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1" class="col-sm-4">Email address</label>
<div class="col-sm-8">
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" size="50" type="email">
</div>
</div>
...
I'd also try to follow the documentation and examples from the Bootstrap docs.
if you are using bootstrap 3 try placing your inputs in a div
<div class="col-md-6">
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" />
</div>
If you're using Visual Studio then you might want to remove Microsoft's defaults in the Site.css which contains:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
I am creating a form that requires the user to input their name and email address. The first line of the form has two inputs side by side for each part of the name and the 2nd line has one input for the email address that should be the same width as the first line combined. I'm trying to use the fluid grid system but can't line up the 2nd row with the first.
<form action="/subscriptions" method="post">
<fieldset>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls row-fluid">
<input class="span2" id="first_name" name="first_name" placeholder="First" required="required" type="text">
<input class="span2" id="last_name" name="last_name" placeholder="Last" required="required" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls row-fluid">
<input class="span4" id="email" name="email" type="email">
</div>
</div>
</fieldset>
</form>
http://jsfiddle.net/sguha095/v4amX/
Have a look a this jdfiddle: http://jsfiddle.net/kY5LL/18/
I added some div.row-fluid containers per row of your form and one extra set of inputs for demonstration.
Hope this is what you were looking for.
First we need to clean up the HTML a bit, there is an extra closing div on the first line.
I just added some classes to improve the styling so you could see how it works. The input-block-level class is a bootstrap mixin to force inputs to act like true block level elements. That's needed if you want this to be clean and to leverage the benefits of CSS. If you want to do all of your styling with HTML, then you can do so with more markup and less semantic methods, but I would recommend against it.
Hope this helps!
http://jsfiddle.net/kY5LL/12/