Bootstrap form layout - html

I just wanted to double check that what I was doing was ok. I am trying to do a layout like so
So its a horizontal form with a label and text area. However, I wanted to do a list of points under my label which is what I basically have. However, I do not think I have done it in the best way.
<div class="form-group">
<label for="whatDetails" class="col-sm-5 control-label">What
<ul>
<li>1.</li>
<li>2.</li>
<li>3.</li>
</ul>
</label>
<div class="col-sm-7">
<textarea rows="5" class="form-control" id="whatDetails"></textarea>
</div>
</div>
Should I be putting my list within my label element, or is there a better way to achieve this?
Thanks

Should I be putting my list within my label element,...
No. You should not be putting your list within the label element.
As per the specs for label here: http://www.w3.org/TR/html-markup/label.html#label-constraints
Permitted contents: phrasing content
and
the label element may contain at most one descendant input element,
button element, select element, or textarea element.
Also, as per the specs for ul here:
Permitted parent elements: Any element that can contain flow elements
...or is there a better way to achieve this?
Just split your label and ul into a separate div of their own.
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-4">
<label for="whatDetails" class="control-label">What</label>
<ul>
<li>1.</li>
<li>2.</li>
<li>3.</li>
</ul>
</div>
<div class="col-sm-8">
<textarea rows="5" class="form-control" id="whatDetails"></textarea>
</div>
</div>

Related

Multi-column label in Twitter Bootstrap

I have the following markup in a form.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">
States
<img id="clear-selection" src="~/images/delete.png" title="Clear Selection" />
</label>
<select class="form-control"></select>
</div>
</div>
</div>
The control label (States) is followed by an icon. But I would really like the icon to be aligned to the right.
Instead of this:
I want this:
Is there any way to do this within the intended framework of Twitter Bootstrap? I'm not really clear about what sort of Bootstrap styles are considered acceptable within a <label> tag.
You can solve this simply by moving the image above and outside of the label and giving it a class of float-right.
This will float the image to right.

How to make input text spread on the entire grid?

Please look at the following code:
<div class="form-group col-md-6">
<label class="col-md-4">Last Seen (Real Time)</label>
<input class="form-control col-md-8" type="text" ng-model="status.lastSeen" ng-readonly="true"/>
</div>
This code creates a label and an input box. How to make the input box occupy the entire grid?
How to make the input box occupy the entire grid?
Do you want a two-dimensional text input field?
If so, rather than
<input type="text" />
You might want to use:
<textarea></textarea>
instead.
See:
https://developer.mozilla.org/en/docs/Web/HTML/Element/textarea
http://www.w3schools.com/tags/tag_textarea.asp
Why would you want informational (?) content to be placed in an input field?
The width of the input is constrained to the parent .col-md-6, the class you assigned to the input (.col-md-8) is therefore 8/12 of the md-6 class. Try wrapping it in its own .form-control
Have you tried using CSS properties to set the height and width of the input to 100%?
In a style.css file or <style> element you could do the following
input {
height: 100%,
width: 100%
}
Is this the complete code? Is your code part of a row?
It's always good to put your rows and cols in a container or container-fluid like so:
<div class="container">
<div class="form-group col-md-6">
<label class="col-md-4">Last Seen (Real Time)</label>
<input class="form-control col-md-8" type="text" ng-model="status.lastSeen" ng-readonly="true"/>
</div>
</div>

Why do form-groups have a negative margin in Bootstrap?

I have this very simple code using Bootstrap 3:
<html>
<body>
<main class="container" role="main">
<form class="simple_form form-horizontal">
<div class="form-group text required campaign_url">
<label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label>
<textarea class="text required form-control" name="campaign[url]" id="campaign_url"></textarea>
</div>
and it appears like this:
Notice how tho labels and the inputs are sticking to the left. Inspecting those elements I found this:
.form-horizontal .form-group {
margin-left: -15px;
margin-right: -15px;
}
Why is that there? I know it's trivial to remove, but it makes me wonder whether the way I'm using Bootstrap is wrong. How should I use it?
It's happening because you are using form-horizontal which is meant to be used as a row along with col-*'s for layout. From the Bootstrap docs:
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
So if you simply remove the form-horizontal the negative margin goes away.
http://codeply.com/go/QQnqgfKv9v
I just spend some time getting to understand this negative margin as well.
Turns out that normally you embed a form-horizontal into a container or container-fluid that puts a margin of 15px and the form-groups use -15px.
The real problem is that you are missing some <div class="col-..."> to wrap your label and form controls.
These add some padding left+right and that will display it correctly.
Something like:
<html>
<body>
<main class="container" role="main">
<form class="simple_form form-horizontal">
<div class="form-group text required campaign_url">
<div class="col-md-12">
<label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label>
</div>
<div class="col-md-12">
<textarea class="text required form-control col-md-12" name="campaign[url]" id="campaign_url"></textarea>
</div>
</div>

Radio Set CSS Styling, stack some buttons but not others

I'm trying to stack some radio buttons while leaving another on it's own because it has additional content.
My fiddle is here
http://jsfiddle.net/CkRF4/5/
<p>Style Radio Set</p>
This FIDDLE will give you a start.
Just a big div with a series of floated divs. Then three divs stacked inside.
I'm sure there are more elegant ways, just can't think of anything this late.
HTML (one floated div)
<div class='holder'>
<div class='littleholder'>
<input type='radio' id='scores' name='scores1' />
<label for='scores'>Assign All Scores</label>
</div>
<div class='littleholder'>
To: <input type='text' /> out of 1
</div>
<div class='littleholder'>
<input type='checkbox'/>Overwrite Scores
</div>
</div>

label form fields alignment css

How can I make the labels of the form fields align vertically with the billing address heading?
http://jsfiddle.net/DA9gK/1/
<h4 class="billingAddress">Billing Address</h4>
<div class="control-group">
<label class="control-label" for="inputEmail">Company Name</label>
<div class="controls">
<input type="text" id="inputEmail">
</div>
</div>
Add
.form-horizontal .control-label {
text-align: left;
}
to your CSS part...Is this what you want?
Take a look at the css box model and if you can implement that, your spacing issues should go away. Floats are some else to consider, but... what you would benefit from specifically here... I can't find the link to, so do this:
<div id="head"></div>
<div id="nav"></div>
<div id="wrapper"></div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="footer"></div>
you can share a line between head & nav based on your style, your left form objects go into leftcolumn, right into right, footer holds its own line typically. This relies on absolute positioning of the wrapper and relative positioning of the everything else I believe. Floats work too, but are considered less flexible.
This approach should give you the kind of control over the spacing you need to make your page "fiddler" example look good.