Multi-column label in Twitter Bootstrap - html

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.

Related

How can I position an arrow image next to dropdown Bootstrap

I am trying to position an image of arrow pointing downwards next to a dropdown select box. I am using Bootstrap 3.0 css.
With the following markup I am able to achieve what I am after but is not responsive (i.e. when I see it on chrome with mobile mode) the image is shoved below the dropdown.
My markup is below:
<div class="form-group">
<label class="col-md-4 control-label">Package</label>
<div class="col-md-3">
<select class="form-control" id="selPackage" ng-model="package"
ng-options="package.Name for package in packages"
>
<option value=""></option>
</select>
{{package.Description}}
</div>
<div class="col-md-1 pull-left" style="margin-left:-20px;">
<img src="./assets/bottom-arrow.png" class="img-responsive" style="width:40px;height: 40px;">
</div>
</div>
But in Mobile mode it looks like this:
Could you please highlight the issue here?
Not sure of the arrow - but the issue you are describing is simply that you have not set any xs or sm classes on the markup and so the bootstrap default is to display the columns as full rows at the smaller viewports (because you have not specified what to display them at).
You will need to experiment to get the right layout for your needs - but it will have to include col-xs-X and col-sm-X classes in there. Also note that you have nested divs in there - so that the inner col-md-3 is actually 3 columns of the parent column.
<div class="form-group">
<label class="col-xs-8 col-sm-10 col-md-4 control-label">Package</label>
<div class="col-xs-8 col-sm-10 col-md-3">
<select class="form-control" id="selPackage" ng-model="package" ng-options="package.Name for package in packages">
<option value=""></option>
</select>
{{package.Description}}
</div>
<div class="col-xs-4 col-sm-2 col-md-1 pull-left" style="margin-left:-20px;">
<img src="./assets/bottom-arrow.png" class="img-responsive" style="width:40px;height: 40px;">
</div>
Don't use inline styling, put your CSS into a separate file and then include media queries to change the position at different viewports. That way you can control what different screen sizes will see depending on the size of the page. Bootstrap has a lot of responsive elements built-in too like the grid system.
So in this instance, add a class onto your div around the arrow to target that and the image within it like this to move it around where you like, however you can also make use of the grid system to change the width of the select box and the arrow as well.
<div class="form-group">
<label class="col-md-4 control-label">Package</label>
<div class="col-sm-3 col-md-3">
<select class="form-control" id="selPackage" ng-model="package" ng-options="package.Name for package in packages">
<option value=""></option>
</select>
{{package.Description}}
</div>
<div class="col-sm-1 col-md-1 pull-left select-arrow" style="margin-left:-20px;">
<img src="./assets/bottom-arrow.png" class="img-responsive" style="width:40px;height: 40px;">
</div>
</div>
I've added a class of select-arrow to the div around the arrow image and also add the col-sm class to both divs which will alter the width on small devices like mobiles. Take a look at the grid options which explains what class you can use and when.
Image of the Grid Options from the Bootstrap docs.

Bootstrap input group line break formatting

Basically I have a bunch of rows with a check box and a label taking up 2 column spaces. Some of the labels are longer then others so when you resize the browser or are viewing on a mobile device the columns with longer labels will collapse to a second row and the shorter ones stay beside their check box. It looks like crap.
HTML:
<div class = "row">
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
Is there a way to make it so that if one of them collapses then the whole row does?
Even better would be to have a dynamic font that worked like an image and just grew and shrank taking up a maximum of 100% as necessary to not cause a collapse at all. I could just use images but I have a lot of these these labels and it will take forever to make an image for each.
Bootstrap provides four classes for different screen :
xs for extra small
sm for small
md for medium
lg for large screen
In your following code should work, you can customize as per your screen needs :
<div class = "row">
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
You can add a custom CSS to your bootstrap style and define some simple CSS rules as you would like to force the style to behave...
CSS Example:
.input-group {
display: inline;
}
I think the right HTML element for this is a list..
although, If you are going to edit the CSS... It's good to know that you can add a custom css file to your project and use a CSS class with your bootstrap style like this:
CSS:
.checkbox-inline {
display: inline;
}
HTML:
<div class="input-group checkbox-inline">
<input type="checkbox">
Small Label
</div>
There are many possible answers...
maybe, you will also find this question useful.

Bootstrap form layout

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>

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>

HTML / CSS Vertical align two lines next to radio

I'm trying to have two lines aligned to the middle of a radio button, shown below.
What is the best way to achieve this with CSS? I can line up the top line but the bottom line is super stubborn. I'm trying not to float the radio, if possible, as it is being restyled using a jquery plugin.
Thanks for your help!
EDIT:
here's my code that I've been working with:
<div>
<input id="method-{{Description}}" type="radio" name="project[shipping-method]" value="{{Description}}" />
<label for="method-{{Description}}" class="pb-shipping-method-label">{{Description}} ({{DeliveryTime}})
<span>{{Price}}</span></label>
</div>
Two divs, one holding the radio and one holding the text. Set the line-height of the radio div to equal the height of the text div. Also add a vertical-align:middle to the radio itself.
Here's a demo: http://jsfiddle.net/AlienWebguy/JffCD/
Play with vertical-align or margin-top property of your input element.
I achieved this with no extra markup whatsoever. http://jsfiddle.net/KFpXQ/
Good luck :)
Bootstrap 4 with flexbox way:
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="pr-2"><input type="radio" /></div>
<div><label for="...">Name 1<br />Price 1</label></div>
</div>
<div class="d-flex flex-row">
<div class="pr-2"><input type="radio" /></div>
<div><label for="...">Name 2<br />Price 2</label></div>
</div>
</div>
Result: