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/
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'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.
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 will like to translate this full code into a zend form with all the ids, html image elements, the classes, the spans. Everything. Am finding it difficult to add the image and to group the elements accordint to the divs and spans.
I will be grateful if anyone could help me. Thank you.
<form method="get" action="/search" name="searchForm" id="searchForm">
<div class="logo">
<a href="http://trial.com" title="Trial" name="trialLogo">
<img width="205" height="40" alt="Trial Search" src="..image/logo.png">
</a>
</div>
<input type="hidden" value="/Listing" name="ref_uri">
<div class="inputBlock">
<span class="inputWrapper"><input type="text" class="labelMagic fieldHelpText" tabindex="3" id="what" name="what" autocomplete="off"><input type="hidden" name="listingId"></span>
</div>
<div class="inputBlock">
<span class="inputWrapper"><input type="text" autocomplete="off" value="Location" class="labelMagic" tabindex="4" id="where" name="where"><input type="hidden" name="geoId"></span>
</div>
<div class="submitWrapper"><button class="goButton" tabindex="5" name="go" type="submit">Go!</button>
</div>
</form>
You could certainly employ a collection of configured HtmlTag decorators to perform all this wrapping, including setting the attributes on all these divs and spans.
But perhaps easier would be to simply employ a ViewScript decorator for the form. A good example appears on this MWOP Dev Zone article.