Noticed something strange on my Bootstrap forms today (v303).
I set my labels to use 3 columns and the input field to use 9 columns, and normally I'd expect this to extend full width of the available space.
But the fields seem to have a mind of their own and are adjusting to their own widths... I can't seem to get them to extend.. even if I add more columns.
What's strange is that, for my fields w/ Bootstrap PREPEND character, it goes full width as expected.
screenshot:
code:
<div class="form-group">
<label class="col-sm-3 control-label">A</label>
<div class="col-sm-9">
<div class="input-group">
**<span class="input-group-addon">#</span>**
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">B</label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>
You are using the input-group class incorrectly.
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.
http://getbootstrap.com/components/#input-groups
input-group will only work well when textbox has other elements before and/or after. As such, from your second input either remove the enclosing input-group div or add some surrounding content within the tag.
<div class="form-group">
<label class="col-sm-3 control-label">A</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">B</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
Related
Screenshot
The problem is that there is a huge space between the datetime input field and the text field. How do i fix it? I have used slds-size and also css width property.But none of that works
What should I do to fix it?
I have used slds-grid for the input fields. The 2nd row code is as follows
<div class="slds-grid slds-gutters">
<div class="slds-col slds-m-left_small">
<label for="rcdt"><div class="required-field">Receiving Date Time</div></label>
<lightning-input id="rcdt" variant="label-hidden" type="datetime"></lightning-input>
</div>
<div class="slds-col">
<label for="delnoid">Delivery Note Number</label>
<lightning-input type="text" variant="label-hidden" id="delnoid"></lightning-input>
</div>
<div class="slds-col slds-m-right_small">
<label for="notesid">Notes</label>
<lightning-input type="text" variant="label-hidden" id="notesid"></lightning-input>
</div>
</div>
I would like to populate a bootstrap form with results from a mongo query using handlebars but am not sure where to put the relevant expressions.
For example, if the code is:
<form method="post" action="/students" enctype="multipart/form-data">
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="title">STUDENT</label>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="title">Surname</label>
<div class="col-md-2">
<input class="form-control" type="text" name="surname">
</div>
<label class="col-md-2 control-label" for="title">First Name</label>
<div class="col-md-2">
<input class="form-control" type="text" name="firstname">
</div>
</div>
</form>
and, say I have the following {{surname}} and {{firstname}} expressions, is there a place in the code I can put them to ensure that when the page renders the forms contain the surname and firstname objects already? Is this even possible?
Any help is much appreciated
If I understand you right you want the inputs value to be filled. You can set the inputs value like this
<input class="form-control" type="text" name="surname" value="{{$surname}}">
<div class="form-inline">
<div class="form-group has-feedback">
<label for="id_first_name">First Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" id="id_first_name" name="first_name" type="text" />
</div>
</div>
<div class="form-group has-feedback">
<label for="id_last_name">Last Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" id="id_last_name" name="last_name" type="text" />
</div>
</div>
</div>
I get a output similar to this: http://i.stack.imgur.com/YKvOY.png
But I want the labels above the fields.
I googled and I see a lot of people have the same problem but exactly the opposite. They have the labels above the fields and want them in the same line. However I tried their code, still not working.
I've created this fiddle demonstrating this using what you provided. form-group should do the trick.
I want to design a form something like this:
I went through the documentation of Twitter Bootstrap and found that there is no proper way of doing it unless you do some CSS hacks over to achieve that. I don't want to do any CSS hacks because they make the page unresponsive.
Is there any proper way for achieving this ?
I have come up with the following code for my form:
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="input-mini" for="first">Start</label>
<label class="input-mini" for="first">End</label>
<label class="input-mini" for="first">Share</label>
</div>
<div class="control-group form-inline">
<input type="text" class="input-mini">
<input type="text" class="input-mini">
<input type="text" class="input-mini">
</div>
</fieldset>
I have also created a jsfiddle. There are two problems with the above form being rendered:
Labels are not horizontal.
The space between text input is not proper.
Yes you can achieve that layout with the help of the grid.
Something like this should do the work:
<div class="container">
<div class="row">
<div class="span1">
One
</div>
<div class="span1">
Two
</div>
<div class="span1">
Three
</div>
</div>
<div class="row">
<div class="span1">
<input type="text" class="input-mini">
</div>
<div class="span1">
<input type="text" class="input-mini">
</div>
<div class="span1">
<input type="text" class="input-mini">
</div>
</div>
<div class="row">
<!-- Same as above -->
</div>
<div class="row">
<!-- Same as above -->
</div>
</div>
See the demo here: http://bootply.com/60908
I want to put 2 forms in a well one next to other. I use twitter-boostrap.
This is my code
<div class="well">
<h3>
Title
</h3>
<form method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="select01">Label1: </label>
<select class="input-mini" id="select01">
(my options)
</select>
</div>
<div class="control-group">
<label class="control-label" for="input01">Label2: </label>
<input class="input-mini" id="input01">
</div>
<div class="control-group">
<label class="control-label" for="select02">Label3: </label>
<select class="input-mini" id="select02">
(myoptions)
</select>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<form method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="input02">Label3: </label>
<input class="input-mini" id="input02">
</div>
<div class="control-group">
<label class="control-label" for="input03">Label4: </label>
<input class="input-mini" id="input03">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
If I include the forms in divs and add a style with float:left, then my well brake and put my forms out of it. I tried span, divs, form inside a form, but I cannot find a way to put one form next to other without break the well.
Try wrapping your forms in a div to isolate that content from the well:
http://jsfiddle.net/SAdM8/6
<div class="well">
<div style="overflow: hidden;">
... forms ...
</div>
</div>
Like Billy Moat said, you could simply add the overflow property to the well. I prefer to keep Bootstrap elements in their natural state to avoid inadvertent breakage. Either works.