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>
Related
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.
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>
I have the following simple HTML and styling (http://jsfiddle.net/ZLNvv/).
<DIV>
<BUTTON class="button"></BUTTON>
<INPUT class="textbox" type=text>
</DIV>
.textbox{vertical-align:middle}
.button{float:left;width:75px;height:75px}
The button is oversized to show clearly that the input box isn't obeying vertical-align:middle. If I remove the float:left styling on the button, the vertical aligning works. Is there any way to combine the two?
I've given the most minimal example which shows the problem, a more accurate example of what I am trying to achieve is below (http://jsfiddle.net/peerz/).
<DIV>
<DIV>Header</DIV>
<DIV class ="lineDiv">
<Div class="subHeaderDiv">
<BUTTON class=button></BUTTON>
<div class="subHeaderText"> Subheader 1</div >
</Div>
<INPUT class="textbox" type=text>
</DIV>
<DIV class ="lineDiv">
<Div class="subHeaderDiv">
<div class="subHeaderText"> Subheader 2</div >
</Div>
<INPUT class="textbox" type=text>
</DIV>
</DIV>
.lineDiv{overflow:auto}
.subHeaderDiv{float:left;width:50%}
.subHeaderText{float:right;vertical-align:middle}
.textbox{float:left;height:30px;vertical-align:middle}
.button{float:left;width:75px;height:75px}
Thank you for any help.
If you want to just put the two ones side by side, try display: inline-block instead of float.
this is the default behavior for floats, the floated element will try to go up and left/right as much as possible, hence vertical align will not work. display:inline-block or margins is the way here like panos and bigfatpig said.
Try this :
<div>
<input type='button' class="button" value='press'/>
<input class="textbox" type='text'/>
</div>
<style type='text/css'>
.textbox{vertical-align:middle;display:inline-block;}
.button{width:75px;height:75px;display:inline-block;}
</style>
it should do what you want.
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:
I have the following HTML:
<div >
<div >
<div style="float: left;">
<input type="checkbox" value="False" />
</div>
<div style="float: left;" > XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</div>
</div>
It displays the XXX to the right of the checkbox. However, if I reduce the screen width, the XXX goes under the checkbox.
Is there any way that I can "lock" the XXX text inside the DIV so the XXXX always appears to the right and on the same line?
(Note that I want to keep using DIV as later on I do some jQuery things with the DIVs.)
If you want them to always be on the same line, you can reasonably combine the two divs into one, still floated, and use the white-space property to keep it on one line:
<div>
<div>
<div style="float:left; white-space:nowrap;">
<input type="checkbox" value="false" /> XXXXXXXXXXXXXXXXXXXXXXX
</div>
</div>
</div>
Starx's answer explains very well why it's not really feasible to do this with two separate floated divs.
edit: http://jsfiddle.net/nkorth/qQSCV/
yep, you can do that by setting fixed width for the container, like so:
<div>
<div style="width:400px">
<div style="float: left;">
<input type="checkbox" value="False" />
</div>
<div style="float: left;" > XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</div>
</div>
That is what float:left is supposed to do. It will remain in the left side as much as possible. If the element before is also floated to the left side, it will try to float to left, together with it, if the space is available. That's why when you resize your screen and there is not enought space for the div to float to the together with previous element, it will float to the left, down the previous element.