How can I move Date picker popup to show on right side? Currently it is making me to scroll page down to view the calendar.
<div class ="form-group">
<label class="col-sm-2 control-label" >Received Date</label>
<div class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy">
<input class="text-input form-control" type="text" name="ARDT" id="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
2. How can size the application number filed width to 15 ?
<div class ="form-group">
<label class="col-sm-2 control-label" >Application Number</label>
<div class="col-sm-3">
<input class="text-input form-control" type="text" name="appNumber" id="appNumber" maxlength="15" size="15"/>
</div>
</div>
DEMO
Twitter bootstrap-3 datepicker has option "orientation":
A space-separated string consisting of one or two of “left” or
“right”, “top” or “bottom”, and “auto” (may be omitted); for example,
“top left”, “bottom” (horizontal orientation will default to “auto”),
“right” (vertical orientation will default to “auto”), “auto top”.
Allows for fixed placement of the picker popup.
Related
i have a question, how can i put a bootstrap progress bar into a form control? I'm trying to do a password strength indicator with a progress bar, but when i put the progressbar into the form control it always shows as full, even though the value of the bar is 0%;
Screenshot
Code(html):
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-lock fa-fw"></span></span>
<input id="pass" type="password" name="password" data-toggle="tooltip" data-placement="top" class="form-control" placeholder="Password">
<div class="progress-bar form-control">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
</div>
It's quite simple: you don't put a .progress-bar inside a .form-control.
You need to pay more attention to Bootstrap markup. (Or to the CSS behind it.)
First of all, you shouldn't put anything else inside .input-groups, other than one single <input> with the class of .form-control and .input-group-addons before or after the input.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
If you want to place a progress bar, again, you need to pay attention to the Bootstrap markup. You have wrap it in a .progress wrapper:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
You could combine the two and keep them together by wrapping them in a .form-group. So your initial markup should be replaced by:
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-lock fa-fw"></span></span>
<input id="pass" type="password" name="password" data-toggle="tooltip" data-placement="top" class="form-control" placeholder="Password">
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only">Password security 0%</span>
</div>
</div>
</div>
<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 need two horizontal checkboxes in one page:
<div data-role="content">
<div data-role="fieldcontain" data-controltype="checkboxes">
<fieldset data-role="controlgroup" data-type="horizontal" id="buddies">
<legend>Hobbies (separates by ',')</legend>
</fieldset>
</div>
<div id="language" data-role="fieldcontain" data-controltype="checkboxes">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Languages (ordered by native, second lang...)</legend>
<input id="eng" type="checkbox">
<label for="eng">English</label>
<input id="zho" type="checkbox">
<label for="zho">国语</label>
<input id="jpn" type="checkbox">
<label for="jpn">日本語</label>
</fieldset>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<a data-role="button" id="revert">Revert</a>
</div>
<div class="ui-block-b">
<input value="Update" type="submit">
</div>
</div>
</div>
One image is more than a thousand words. As you see, two checkboxes' totally messed up:
Old fashion table tag works!!!
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>
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