checkbox label overlaps in 1024 x 768 resolution - html

My JSP code is
<h:field
path="configuredChannels"
required="true"
code="admin.menu.channels">
<div class="row-fluid"
data-channel-checkboxes="#">
<form:checkboxes
element="div class='span1 checkbox'"
items="${channels}"
path="configuredChannels" />
</div>
</h:field>
However the checkbox items works fine on all other resolutions but the item channel value facebook just overlaps with the next checkbox only on 1024 X 768.
here is the jpeg image.
Here is the resulting client code in HTML
<div class="controls">
<div class="row-fluid" data-channel-checkboxes="#">
<div class='span1 checkbox'>
<input id="configuredChannels1" name="configuredChannels" type="checkbox" value="SMS"/><label for="configuredChannels1">SMS</label>
</div class='span1 checkbox'>
<div class='span1 checkbox'>
<input id="configuredChannels2" name="configuredChannels" type="checkbox" value="Voice"/><label for="configuredChannels2">Voice</label></div class='span1 checkbox'>
<div class='span1 checkbox'><input id="configuredChannels3" name="configuredChannels" type="checkbox" value="Facebook"/><label for="configuredChannels3">Facebook</label></div class='span1 checkbox'>
<div class='span1 checkbox'><input id="configuredChannels4" name="configuredChannels" type="checkbox" value="Twitter"/><label for="configuredChannels4">Twitter</label>
</div class='span1 checkbox'><input type="hidden" name="_configuredChannels" value="on"/></div>
<span class="help-inline">
</span>
</div>
</div>
Latest Images

The problem is that you're using a fluid row grid and give the checkboxes a fluid span width:
<div class="row-fluid" data-channel-checkboxes="#">
<div class='span1 checkbox'>
This means that the row-fluid is always 100% of the width of it's container (whatever that may be in the context of your HTML, and the checkbox divs have the span1 class, which is always 6.382978723404255% of the row-fluid width. (This is defined in Twitter Bootstrap)
When you resize the window the 100% of the row-fluid becomes smaller, and at a certain point it hits the mark where ~6.38% of that is not enough to fit the entire contents of the checkbox.
There is no simple solution for this while maintaining this fluid grid, it's doing exactly what it's supposed to do but you probably didn't intend this. A better solution would probably be to not give the checkboxes a defined width just let them use all the width they need.
Try removing span1 from the checkbox divs, and add this CSS:
.checkbox {
float: left;
}
This means that they will not have the evenly distributed width they used to have, but instead once there is not enough room to show all of them on one line the checkboxes will continue on a new line.
addition
You're setting classes on the closing tag of a div. That is completely useless. Classes (and all other attributes) should only be set on the opening tag (<div>), never on </div>

Related

How can I set the width of a row of multiple inputs to a percentage of the browser window width when some inputs are of fixed size?

Title says it all. I have a row of inputs including text fields, selects, radio buttons and checkboxes, and I want the total width of the row to be a percentage of the screen but I also want some of the individual inputs to remain a constant width. I've tried putting all the row inputs inside <div> tags and setting the css of the div to width:100% but it doesn't do anything. I think that's because I've set the css of some of the inputs to a specific number of pixels.
<div style="width:90%">
<span style="width:100%; display:block">
<input type="text" style="width:50px">
<input type="text" style="width:33%">
<input type="text" style="width:33%">
</span>
</div>
Meler,
It seems you've not considered the basics like inputs usually behave as inline elements. Please make sure that you have made them block to occupy the width in %
eg:
<div style="width:90%">
<span style="width:100%">some text</span>
//this should not work until you make span as 'display:block'
</div>

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>

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.

center input in bootstrap with input-prepend

<body>
<div class="container">
<div class="row">
<div class="offset4 span4">
<h1 class="text-center">Days</h1>
<form method="post" action="proc/days.php" id="jobs">
<div class="input-prepend">
<span class="add-on">Job Count</span>
<input type="text" class="day1">
</div>
<div class="input-prepend">
<span class="add-on">Day Name</span>
<input type="text" class="day2">
</div>
</form>
</div>
</div>
</div>
</body>
is my primary block of code (with all the other stuff striped out). I want to get the input-prepend to take up all the width available in the span4.
Right now, the only tricks I can find end up not working, or being way to large.
Also, I am using the Cosmo Bootswatch theme.
Setting .day1 to 76% width (after padding and borders are considered etc) will fill up your space. Problem would then be that you have another element depending on the .day1 class. So add an id, or example like:
<input type="text" class="day1" id="day1">
and then use #day1 {width:76%;} in your css. You'd most likely need to adjust the width size as your screen width changes though (through media queries).

how to put label in the same row

By using http://twitter.github.com/bootstrap/assets/css/bootstrap.css,
when I make a stack of labels, they are rendered in one column.
<label>..</label>
<label>..</label>
<label>..</label>
My goal is to put them in several columns depending by the width of the screen.
Here is my demo http://jsfiddle.net/D2RLR/2557/
Any hints?
Something like that?
<div class="row">
<div class="span3"><label>...</label> </div>
<div class="span3"><label>...</label> </div>
<div class="span3"><label>...</label> </div>
<div class="span3"><label>...</label> </div>
</div>
Your code was almost correct. You left a couple of <div>s unclosed, but you also had the .controls and .control-groups nested incorrectly.
Here is an updated fiddle with your code fixed as well as an example with 3 columns (I also updated the javascript and added buttons for toggling the checkboxes. If you want to still use a checkbox for toggling you can modify the code pretty easily):
http://jsfiddle.net/D2RLR/2624/
(make sure you scroll down in the html section of the fiddle to see the second example, in case you have a small screen)
This example uses columns and will add more columns across as the screen size will allow. This is purely css and html.
This script will size the columns based on the width of the container they are in. Simply specify the number of columns. This way all columns will always fit perfectly in a row. This uses jquery to resize the column widths.
You could float the labels with css.
<div class="column">
<label class="float"></label>
<input type="checkbox" value="2"> Monday
</div>
<div class="column">
<label class="float"></label>
<input type="checkbox" value="3"> Tuesday
</div>
...
<div class="clear"></div>
CSS
.column {
width: 200px;
float: left;
}
.clear {
clear: both;
}