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>
Related
This is a cosmetic question, but I've got a form for sending out messages to predefined recipients and/or to custom recipients. But if you run the example you'll notice a small vertical alignment problem with the checkbox and the textbox for the last option (Ideally the checkbox would vertically aligned to the center of the textbox). I could manually override the top margin of the checkbox with an inline style of 10px, but I'm hoping there is an option that doesn't rely on an assumption of textbox size? I've tried the input-group or form-inline for just the last option, but none seem to be quite right and tend to make it worse.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Recipient Types</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" />Send to Sales Department
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />Send to HR Department
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
</form>
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.
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>
Does anyone have any ideas of how to create a two panel modal. So for example one side would be a login form or something and the other side would be a list of what users get. Or one side would be a physical contact information div and the other side would be an email contact form. I tried to do two divs under the modal div tag and have one pull-left the other pull-right with each span5 or span6 but it didn't work. I ask because I have this issue. Also can anyone tell me why my contact form has so much space between the label and the input box? Go to scoopclassifieds.com (not trying to plug my site, can't post pics yet) and click contact us. I have placed the html mark up blow
<div class="modal hide fade" id="contactForm" aria-hidden="true">
<div class="modal-body">
<form action="" method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label">Email:</label>
<div class="controls">
<input type="text" name="email" id="email" class="input" />
</div>
</div>
<div class="control-group">
<label class="control-label">Subject:</label>
<div class="controls">
<input type="text" name="subject" id="subject" class="input" />
</div>
</div>
<div class="control-group">
<label class="control-label">Message:</label><br/><br/>
<div class="controls">
<textarea rows="5" class="input span4" name="message" id="message"></textarea>
</div>
</div>
<div class="control-group"><div class="controls"><input type="submit" name="contactUs" id="contactUs" class="btn" value="Contact Us" /></div></div>
</form>
</div>
</div>
Sorry if the code is so horribly formatted. I used cpanel text editor to develop it. I know its a bad idea but I had to do it as fast as possible to provide a live example.
Try putting a row-fluid inside the modal-body, and then 2 span6 inside that..
<div class="modal-body">
<div class="row-fluid">
<form class="span6">
</form>
<div class="span6">
</div>
</div>
</div>
You may also want to increase the default width of the modal..
.modal {
width:45%;
left:45%;
}
Demo on Bootply: http://bootply.com/69517
I'm trying to put an input field's label next to it instead of above it using bootstrap. Wrapping this in form-horizontal works, but it's not actually in a form (just an ajax call that reads the value). Is there a way to simply move the label to the left side of the input?
<div class="controls-row">
<div class="control-group">
<label class="control-label" for="my-number">ALabel</label>
<div class="controls">
<input id="my-number" type="number"/>
</div>
</div>
</div>
The fiddle is at http://jsfiddle.net/7VmR9/
Yes, you can do this by bootstrap column structure.
<div class="form-group">
<label for="name" class="col-lg-4">Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="name" id="name">
</div>
</div>
Here is a Bootply Demo
The div is a block element, that means it will take as much width as it can and the input element is in it.
If you want the label to be next to the input element: either put the label in the div or make the div an inline-block element.
<form class="form-inline">
<div class="form-group">
<label for="my-number">ALabel</label>
<input type="number" id="my-number" class="form-control">
</div>
</form>
Source: https://getbootstrap.com/docs/3.3/css/#forms-inline
You can take help directly from website they provided, well documented.
Here is a link to a Fiddle with Bootstrap css.
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email"/>
</div>
</div>