multi line label bootstrap - css

I'm making a horizontal form with bootstrap 3 and for required input fields I'd like to add an asterisc after each label. Of course this isn't a problem, but for layout purposes I want to do two things:
1) if a label (question) in the form is so long that it causes a linebreak I want the second part of the label (on the 2nd line) to be outlined on the right side with the first line.
2) labels without asterisc should be in line with labels with a asterisc.
See the image for an example
Can anyone please explain how I can use bootstrap styling/layout to have the labels with/without asterisc display at the same position, even when labels are spread across twee lines of text?
.form-group.required .control-label:after {
content: " *";
color: red;
}
label {
text-align: right; /* bootstrap styling is missing, but usually label is aligned right */
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
<div id="myForm">
<div class="form-group required">
<label class="col-xs-4 control-label" for="question1">This is a really long label that breaks and spreads</label>
<div class="input-group">
<input type="text" name="question1" id="question1" class="form-control">
</div>
</div>
<div class="form-group required">
<label class="col-xs-4 control-label" for="question1">Short label (required)</label>
<div class="input-group">
<input type="text" name="question1" id="question1" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label" for="question1">Short label (not required)</label>
<div class="input-group">
<input type="text" name="question1" id="question1" class="form-control">
</div>
</div>
</div>
</form>

Related

Why Does Bootstrap Label appear in wrong place?

I can't make out the convoluted logic behind where <label> elements are actually placed. I want a form with two rows. I want a label for each row, and then an input box after that. I would like the responsive behavior that when the viewport gets narrow, the label appears just above the input. When wide the label is left and the input right.
Works OK most of the time, but sometimes the <label> behaves so strange and I struggle trying to just get a simple two row form to work. Here is the sample:
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="well">
<div class="form-group">
<label class="col-md-2 control-label">
Reminder
</label>
<div class="col-md-5 container">
<input type="text" class="form-control"/>
</div>
<div class="col-md-5 container">
Minutes before meeting
</div>
</div>
<!-- Form Control TYPE Begin -->
<div class="form-group">
<label class="col-md-2 control-label">Type</label>
<div class="col-md-10">
<div class="radio radio-primary">
<label>
<input type="radio" value="1"
class="form-control">
Circle Meeting
</label>
<label>
<input type="radio" value="2"
class="form-control">
Operational Meeting
</label>
</div>
</div>
</div>
</div>
<body>
I just spent 15 minutes making this selfstanding, so you should be able to put this in a file and load it directly into a browser.
The result is that instead of putting the label on the left, it is put in the row above (in that DIV) instead of in the DIV that the label is declared in. I have tried a number of manipulations, but the label seems to want to "jump" out of the DIV it is defined in, and into the DIV before it, and that messes up the layout of both DIV tags which are meant to be rows in a form.
See that the "Type" label does NOT appear on the left edge, but rather floating in the previous DIV and with the last element within that DIV.
Also the layout of the radio buttons and the labels on them are very inconvenient.
I would very much appreciate if someone can explain what is going on, and how to avoid this in the future. (Not just a solution to this case, but an explanation that will allow me to avoid future cases as well.)
This should fix it; Set the form and fields tags around your form; some class changes
<div class="well">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label" for="textinput">
Reminder
</label>
<div class="col-md-5">
<input type="text" name="textinput" class="form-control"/>
</div>
<div class="col-md-5">
Minutes before meeting
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Type</label>
<div class="col-md-10">
<label class="radio-inline" for="radios-1">
<input type="radio" name="radios" id="radios-1" value="1">
Circle Meeting
</label>
<label class="radio-inline" for="radios-2">
<input type="radio" name="radios" id="radios-2" value="2">
Operational Meeting
</label>
</div>
</div>
</fieldset>
</form>
</div>

Form-horizontal pulls form-group to the right

Here's the HTML:
<div class="row">
<div class="right-block-title col-xs-12">Change Password</div>
</div>
<form id="change-password-form" class="form-horizontal">
<div class="form-group">
<label for="oldpass" class="control-label col-xs-4">Old Password</label>
<input id="oldpass" type="password" name="oldpass" class="col-xs-8"/>
</div>
<div class="form-group">
<label for="newpass" class="control-label col-xs-4">New Password</label>
<input id="newpass" type="password" name="newpass" class="col-xs-8"/>
</div>
<div class="form-group">
<label for="confirmnew" class="control-label col-xs-4">Confirm Password</label>
<input id="confirmnew" type="password" name="confirmnew" class="col-xs-8"/>
</div>
</form>
And here's the result:
https://jsfiddle.net/bsdca8zc/7/
If your screen is big enough, you'll see that the form gets sucked to the right. I want to have it all aligned to the left (like the title).
I tried pull-lefton the form-group elements, but it breaks the layout.
A negative margin-left on the form-group elements works, but it's not clean at all since it'll break every time we change the labels (and I also don't think it's good for responsive reasons).
The horizontal form is intended to show the labels inline for resolutions small and up. It shows the labels on top for xs. You would need to add the class form-control to your inputs for this behavior. It wasn't clear if that is what you were after or not.
If you are just wanting to align the labels here is an example. The col-sm-3 was replaced with col-xs-3 and text-right was added to right align the text.
<div class="form-group">
<label for="oldpass" class="control-label col-xs-3 text-right">Old Password</label>
<input id="oldpass" type="password" name="oldpass" class="col-sm-6"/>
<div class="indicator col-offset-3"></div>
</div>
https://jsfiddle.net/1heet5re/
Might need a better explanation of what you are trying to achieve to help more.

LongForm labels appear inline but on one line instead of two

I'm trying to make a longer label display inline with a textbox. I want the label to be on one line and display inline with the textbox. I'm using Bootstrap 3 and I can't seem to figure out how to make this happen. Here is some example code:
<div class="form-group">
<label for="d" class="control-label col-sm-2"> Two line label here:</label>
<div class="col-sm-10">
<input type="text" placeholder="" required="true" name="p" id="d" class="form-control" title="">
</div>
</div>
What classes should I be using to do this?
You can implement like this way..
<div class="input-group">
<div class="input-group-addon">Two line label here</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"/>
</div>

Horizontal form with inline radio button and textboxes

I have a horizontal form in bootstrap and I am trying to arrange a radio button with two text fields like so (sorry I can't embed the image):
However, I can't see to replicate this. I've tried the following (Jade markup):
.col-sm-4
.form-group
label.control-label(for='time') Time Range
.form-inline
.form-group
input(type='radio', id="from", name='time', value='from', data-toggle='radio')
label(for="from") From
.form-group
input(type='text', name='first')
.form-group
input(type='text', name='last')
Which results in everything being on one line, but the "From" is completely covered up and the two text boxes are back to back with no space. Is this a simple CSS fix, or am I mis-understanding form layouts in Bootstrap 3? Any feedback would be much appreciated.
EDIT: The rendered html is:
<div class="form-group">
<label for="time" class="control-label">Time Range</label>
<div class="form-inline">
<div class="form-group">
<input type="radio" id="from" name="time" value="from" data-toggle="radio">
<label for="from">From</label>
</div>
<div class="form-group">
<input type="text" name="first">
</div>
<div class="form-group">
<input type="text" name="last">
</div>
</div>
</div>
Here's how you want it:
<div class="form-inline">
<label for="time" class="control-label">Time Range</label>
<div class="form-group">
<input type="radio" id="from" name="time" value="from" data-toggle="radio">
<label class="control-label" for="from">From</label>
</div>
<div class="form-group">
<input class="form-control" type="text" name="first">
</div>
<div class="form-group">
<label class="control-label">To</label>
<input class="form-control" type="text" name="last">
</div>
</div>
See this demo
I'm not sure how to translate that into Jade markup--I'll leave that to you :)
EDITED to add: This is what an online converter spit out:
.form-inline
label.control-label(for='time') Time Range
.form-group
input#from(type='radio', name='time', value='from', data-toggle='radio')
label.control-label(for='from') From
.form-group
input.form-control(type='text', name='first')
.form-group
label.control-label To
input.form-control(type='text', name='last')

Bootstrap 3 Vertical Align issue with grid sections containing input elements

I have a row that is split down into various columns and sub-columns. In the proper example there are several more inputs but I've removed them for clarity as they're not needed for this example.
<form id="inputForm" class="form-inline" role="form">
<div class="row">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="col-xs-6">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon">mm</span>
</div>
</div>
<div class="col-xs-2">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</form>
If you look at http://jsfiddle.net/53vu25ad/ you can see the issue as "Primary Packaging" and "Vol: 999 cm3" are not vertically aligned within the row - they're top aligned. Is there something I'm missing here?
(ps: On my form, the "height" label and the input element are on the same line, I have no idea why they're not in this jsfiddle, but it's not relevant to the question - I would still expect to see the two labels either side aligned vertically).
Using bleeding-edge not-yet-released Bootstrap v3.2.1: JS Fiddle
The trick is to use a dummy .form-control-static:
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
<p class="form-control-static"> </p>
</div>
</div>
Well without using experimental bootstrap, the way I got around this was adding a simple custom class that matched the form-control element height of 34px.
By setting the row line-height to the same, it automatically valigns content.
.fixedRow {
line-height: 34px;
}
<div class="row fixedRow">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
...
Updated jsfiddle: http://jsfiddle.net/53vu25ad/2/
Please find the updated jsfiddle
You may need to use the .form-group class for .form-inline
<form id="inputForm" class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="form-group">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon fw1">mm</span>
</div>
</div>
<div class="form-group">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</div>
</form>

Resources