How can I put, side by site, a RadioButton and a TextInput field on my Bootstrap 3 Form?
I want to achieve this:
(o) A fixed value
( ) A value between [ ] and [ ]
(being parenthesis the RadioButton and brackets, the text box).
Thank you.
Something like this should work:
<div class="form-horizontal">
<div class="col-md-12">
<input type="radio" id="test">A fixed value
</div>
<div class="col-md-12" style="display:inline">
<input type="radio" id="test2">A value between <input type="text" id="text1" /> and <input type="text" id="text2" />
</div>
</div>
Related
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}}">
I have a table that has a form inside one of the cells. Because of the way that bootstrap controls input field sizing, it seems the documented way to do this is through this method
http://getbootstrap.com/css/#forms-control-sizes
But, because my form is sitting in a table, is there a way to do this properly?
Here is what it looks like.. and it's def not right... I don't even think I can be putting rows inside my cell..
<td>
<div class="row">
<p>$00.00</p>
<form role="form" class="form-inline cartAdd" name="itemAdd" method="post" action="shop.php">
<div class="col-lg-3">
<label class="sr-only" for="quantity">Quantity</label>
<input type="text" class="form-control quantity" name="quantity" placeholder="Qty" maxlength="3">
</div>
<div class="form-group">
<input type="hidden" class="form-control pid" name="pid" class="pid" value="1" >
</div>
<div class="col-lg-3">
<button type="submit" class="btn btn-default" name="button" id="7PlateButton">Add</button>
</div>
</form>
</div>
</td>
I wish to display some fields of my form in foundation reveal along with the submit button.
Something like:
<form action="" method="POST">
{% csrf_token %}
<div class="large-8 columns">
<input type="text" name="name" label="name"></input>
</div>
Submit
<div id="display_detail" class="reveal-modal" data-reveal>
<input type="text" name="age" label="name"></input>
<input type="submit" value="Submit" class="button">
</div>
</form>
But when the link "Submit" is clicked, I see that the reveal-data div is actually put outside the form. How can this be rectified?
To make sure the Reveal modal actually hovers above the page, and not within some relatively positioned element, it is necesary to move the html to the top level body element.
To deal with this I didn't try to hack into the Reveal plugin to stop this behaviour, instead I added an event listener to a new form that duplicated the entries:
<form action="" method="POST" id="baseform">
{% csrf_token %}
<div class="large-8 columns">
<input type="text" name="name" label="name"></input>
</div>
Submit
<div>
<!-- preferably hide this block using JS -->
<input type="text" name="age" label="name"></input>
<input type="submit" value="Submit" class="button">
</div>
</form>
<div id="display_detail" class="reveal-modal" data-reveal>
<form data-linked-form="baseform">
<input type="text" name="age" label="name"></input>
<input type="submit" value="Submit" class="button">
</form>
</div>
Then using coffeescript:
# duplicate values
$(document).on('input', 'form[data-linked-form]', (e)->
form = e.currentTarget
input = e.target
document.forms[form.dataset.linkedForm].elements[input.name].value = input.value
)
# submit the linked form, instead of itself
$(document).on('sumit', 'form[data-linked-form]', (e)->
form = e.target
document.forms[form.dataset.linkedForm].submit
)
Few days ago Twitter Bootstrap 3 RC1 released and i just started to play with it on a personal project.
I have a horizontal form which includes some inline radio-checkbox groups but horizontal alignment of these elements are not equal:
Question 1: Why chrome doesn't displays help-block element on the same line with the label?
Question 2: How to align inline radio group on the same line with label?
Question 3: Is following markup valid? Are these problems related with the markup?
Markup:
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Weight</label>
<div class="col-lg-1">
<input type="text" name="weight" class="form-control" value="20">
</div>
<div class="help-block"> grams</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Full part name</label>
<div class="col-lg-6">
<input type="text" name="name" class="form-control" placeholder="Don't use numeric characters..">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Inline radios</label>
<div class="col-lg-10">
<label class="radio-inline">
<input type="radio" name="radio"> Hello
</label>
<label class="radio-inline">
<input type="radio" name="radio"> Other
</label>
<label class="radio-inline">
<input type="radio" name="radio"> Another
</label>
<label class="radio-inline">
<input type="radio" name="radio" checked="checked"> Foobar
</label>
</div>
</div>
</form>
</div>
EDIT:
Also this markup on a small screen produces a "dropped help-block element". I think my markup is problematic but i have no idea what is wrong.
Your markup seems to be valid on first sight. About your question 1.
You have set your input with:
<div class="col-lg-1">
<input type="text" name="weight" class="form-control" value="20">
</div>
So to width is set with the col-lg-1 prefix, see also: https://stackoverflow.com/a/17920693/1596547. "col-lg-1" stack below 992 pixels. When you're screen width is > 992 px. The div got a width of 8.333% (100/12). The
form-control class set the width of the input tag to 100%. Below the 992px there is no definition for "col-lg-1" cause the 100% width of the input, the input is displayed with 100% width.
Try to use the col-* prefixes which never stacks (or use other CSS to set the width)
I did not found different behavior for Chrome at all. Above the 992px i will find this on both FF and Chrome:
I did not found a solution for your second question yet.
Question 2:
Your labels got a padding-top of 9px from:
.form-horizontal .control-label {
padding-top: 9px;
}
the .radio-inline have no padding, so add the code below to your css:
.radio-inline, .checkbox-inline {
padding-top: 9px;
}
See: https://github.com/twbs/bootstrap/pull/8967
I am doing a website for my personal use. I need some assistant on how to set a text-box next to a label without using tables. They are in their own division tags
<div id="outter">
<div class="1">
Fill out and submit the form below and we will contact you a.s.a.p.
</div>
<div class="2">
<label> Name: </label>
</div>
<div class="2">
<input name="name" type="text" class="3" >
</div>
</div>
trying to get this:
[input box 1] label 1
[input box 2] label 2
here is the link for better details
http://homework.genesee.edu/~dmead1/forms/table.html
Very Simple Solution Of Your Problem
HTML
<fieldset class="login">
<legend>Fill out and submit the form below and we will contact you a.s.a.p. </legend>
<div><label for="name">Name</label> <input type="text" id="name" name="name"></div>
</fieldset>
CSS
fieldset div {
margin:0.3em 0;
clear:both;
}
Check Fiddle