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:
Related
I'm trying to lay out a grid of checkboxes in CSS, using Tailwind CSS. The basic structure is this:
<div class="grid sm:grid-cols-3 gap-4">
<div>
<div>
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
<div>
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
</div>
<div>
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
...
</div>
So I have an outer div which is the grid, then a series of "content" divs. The first content is 2 lines high (2 checkboxes). The second is one line high (one checkbox).
My problem is that the checkbox in the second grid box is aligned to the top of the box, and I want it centred vertically. I've added background colours so I can see that the div spans the whole height of the previous grid box, but I can find no way of centring the checkbox in the containing div.
Can anyone tell me how to get the effect I want? And more so, can someone explain to me how the box model works in a way that explains why it's not doing what I want? Ideally, I'd like to be able to do this with Tailwind, for consistency, but raw CSS would be OK as well.
Align your items to the center by applying the class items-center to your grid (this method will align all your items and might affect your other child elements in an undesired manner later on when you add more elements to the grid).
<div class="grid gap-4 sm:grid-cols-3 items-center">
You can also apply either grid or flex to the parent's container, which you want to center vertically (using items-center):
<div class="flex items-center">
<label for="-exact">
<input type="checkbox" id="-exact" value="-exact"> -exact
</label>
</div>
<-- or -->
<div class="grid items-center">
<label for="-exact">
<input type="checkbox" id="-exact" value="-exact"> -exact
</label>
</div>
I'm not sure if it exactly answers your question, but the reason the elements stick to the top-left side is that it's still displayed as a block. Changing the parent to a grid doesn't change the display type of child elements.
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
As far as I understood your error, the second div element positions on the top of the whole grid element but you want it to be in the center. Check this snippet out if that's the issue: (I have vertically centered the second grid column)
<!doctype html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--Main grid element with 2 child divs-->
<div class="grid grid-flow-col gap-4">
<!--First child div with 2 sub child div displayed as columns-->
<div class="flex flex-col">
<div class="p-5 bg-yellow-300">
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
<div class="p-5 bg-red-300">
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
</div>
<!--Second child with 1 div element, centered in its place-->
<div class="p-5 bg-green-300 h-full flex items-center">
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
</div>
</body>
</html>
Explanation: To place elements in center (or change their position), you have to give it a display name e.g. block, flex, grid etc. Then there are couple ways you could go and center/position your element. The most efficient one would be to use the relevant styles related to the display name. For example:
For Flex model, you'd use justify-content: center which in Tailwind would be justify-center classname to center an element vertically. And to horizontally center it, you'd use align-items: center which in Tailwind would be items-center classname.
For Grid model, you'd use place-items: center which in Tailwind would be place-items-center classname to center an element vertically & horizontally.
These are a bit different for each display property. You can look that up on google if you don't know. Hope that helps.
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.
Does anyone know how I can fix the floating label overlapping with the line of the element above it as seen here: http://imgur.com/a/4T7Rx
Basically I would like to lower the height of the floating label.
I have tried setting margins and a few other settings in CSS on:
.input-field label
but I had no luck.
I also tried adding line breaks but that only added space between the label and the textfield, no matter where I put them.
Edit:
<div class="col s12">
<br>
<ul class="collapsible popout blue darken-3 z-depth-2" data-collapsible="accordion">
<li>
<div class="collapsible-header blue darken-3"><i class="material-icons">filter_drama</i>New Body Stats Entry</div>
<div class="collapsible-body input-field col s4"> <label for="arms">Arms</label><input class="center-align" id="arms" type="text"> </div>
</li>
</ul>
</div>
Disregard, for anyone else experiencing this issue, just set a margin-top using CSS; not sure how it took me an hour to figure that out.
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>
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.