I want to display a checkbox, followed by some text that wraps around below itself. The HTML without any CSS looks as follows:
<input type="checkbox" checked="checked" />
<div>Long text description here</div>
I want it to display similar to:
X Long Text
Description
Here
It currently wraps around like this
X Long Text
Description Here
This is easy to do with tables, but I need it to be in CSS for other reasons. I thought a combination of display: inline-block / float: right / clear / spans instead of DIVs would work, but I've had no luck so far.
Wrap the checkbox and label in a container div (or li - i do forms with lists often) and apply
<div class="checkbox">
<input type="checkbox" id="agree" />
<label for="agree">I agree with checkbox</label>
</div>
.checkbox input {
float:left;
display:block;
margin:3px 3px 0 0;
padding:0;
width:13px;
height:13px;
}
.checkbox label {
float:left;
display:block;
width:auto;
}
Try this:
input { float: left; }
div { margin-left: 40px; }
Tune the margin-left to how much space you want. The float: left on the checkbox basically takes it out of the block layout so it doesn't push down the text.
Related
I have a radiobutton that has two lines as a label. The whitespace between the lines are two much and I want to decrease them.
This is my code:
<label for="reg-promo">
<input type="radio" name="promotion" id="registerPromo" v-validate="'required'" checked="checked"
v-model="registerPromo" value="reg-promo" />
<span>
<b>Welcome Offer</b>
<p id="welcomeOfferSubtext">$35 in credits available</p>
</span>
</label>
welcomeOfferSubtext just simply adds 28px padding to the left of the paragraph:
#welcomeOfferSubtext {
padding-left: 28px;
}
Right now it looks like this:
But I want it to look like this:
What's the best way to fix it?
P.S
Please ignore the sentence differences. The focus is on spacing
I don't want to use line-height from CSS
The extra vertical space is probably coming from some other (or browser default) <p> CSS.
Either change the <p id="welcomeOfferSubtext"> to <div id="welcomeOfferSubtext">
Or add to your css:
#welcomeOfferSubtext {
padding-left: 28px;
margin: 0; // add this line
}
Firstly make span as inline-block, so that all elements within span will be aligned to span. Now you can do your css accordingly. <p> tag has some default margin, you can then modify it accordingly.
<style>
span{
display: inline-block;
vertical-align: top;
}
#welcomeOfferSubtext{
padding: 0;
margin-top: 5px;
}
</style>
I'm completely new at html/CSS and I can't seem to be able to find how to both add spacing between labels and input while making the input extend to the right edge of it's enclosing container and have both the label and input be on the same line.
so far I have:
label {
text-align: right;
clear: both;
float:left;
margin-right:25px;
}
input {
width: 100%;
}
<div class="container">
<form action="home.html">
<label for="label">Label:</label>
<input type="text" id="rcorners1" name="field_name">
<input type="submit" value="submit" class="btn btn-primary btn-block">
</form>
</div>
This makes the label appear above the input which makes sense because I set the width to 100%. What is a good solution? I do not want to set the width to a specific pixel size, but rather have the width always extend from the label to the right edge of the container no matter the size of the label itself.
I understand similar questions may have been asked before but I can't find a solution so thank you very much for your help.
You may try:
label {
text-align: right;
float:left;
margin-right:25px;
width:100px;
}
input {
width: calc(100% - 150px);
float:left;
}
with your HTML
<label for="label">Label:</label>
<input type="text" id="rcorners1" name="field_name">
See it on jsfiddle
Note: you can set the with of the label as you like
I am front-end stupid and can't ever figure this stuff out. For some reason I'm seeing an abnormal amont of space in between my radio button and the text.
look on bottom of page
I am using bootstrap and I feel as if it is doing this. How can I get that space to go away? There's no margin or anything on it current which is why I am a little confused.
<div class="radio">
<h4>By Price</h4>
<label><input type="radio" name="optradio"> Low </label>
<br />
<label><input type="radio" name="optradio"> High </label>
You're labels are floating left which means it's being pulled to the far left of your container. I would recommend wrapping your content in columns. So something like this would work...
<div class="radio col-sm-3">
<h4>By Price</h4>
<label><input type="radio" name="optradio"> Low </label>
<br />
<label><input type="radio" name="optradio"> High </label>
</div>
If your content is then not centred, I would add this to your CSS...
.radio {
margin: 0 auto;
}
That should centre your content.
.radio{
width: 100px;
margin-left: auto;
margin-right: auto;
}
Also use a different div class.
<div class="radio col-sm-3">
I believe it's because the Div with class "radio" has a default width of 100%. When I change the css for .radio to width: 100px (or a percentage of your choice) then the radio button is much closer to the text. You will also have to center the div with the margin-left and margin-right as follows
.radio{
width: 100px;
margin-left: auto;
margin-right: auto;
}
As stated, the radio buttons are floated left in CSS.
This is a CSS rule meaning they're being taken out of the flow of the document.
The result is that they're positioned relative to the parent div, instead of according to their relationship to other block-level elements (the labels). That's pushing them all the way to the left of the form element.
In your external CSS file (not "products.css" but the one w/the gigantic hashed name) find this line:
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
The offending code is float: left;
Remove the float and the inputs should rest directly next to the text.
Play with the margin settings to position it as you like.
I would recommend using:
<input type="radio" name="optradio"> Low <br />
<input type="radio" name="optradio"> High
I'm pretty sure it will work.
I had the same problem, Later i found out it was because i created a class for input like,
.input
{
width: 200px;
border: 1px solid #000;
padding: 5px;
}
Later i edited the input with some other name like,
input.a1
{
width: 200px;
border: 1px solid #000;
padding: 5px;
}
and the problem solved for me;
When the text is long the checkbox goes above the text. How can I make it stay on the same line as the text but break the text if its long? ie give the text white-space:normal but keep the checkbox and the first bit of the text on the same line.
<input style="float: left" type="checkbox" ...etc..> my text
I've amended the markup to use a label and input, but that's not necessary (you'll just need something to contain your checkbox. Take a look at this jsFiddle for an example.
HTML:
<div class="container">
<label><input type="checkbox"> My text - this label can be as long as you want it to be, see?</label>
</div>
CSS:
.container {
width: 150px;
background: red;
}
label {
display: block;
padding-left: 1em;
}
input {
display: inline-block;
margin-left: -1em;
}
The width on the .container is just there to show that this will work when the text wraps: it will work at any width and for responsive designs without anything fixed. It'll look like this:
And here's an example using your original markup (with an added span, I'm assuming you can include that):
<div class="container">
<span><input type="checkbox"> My text - this label can be as long as you want it to be, see?</span>
</div>
UPDATE: Something else that maybe useful for you:
http://jsfiddle.net/persianturtle/FrEsX/3/
Hide's the overflow.
Something like this?
http://jsfiddle.net/persianturtle/vwfwh/3/
If not, draw a picture.
.container {
width: 150px;
height: 200px
}
input {
margin: 25px 25px 50px 50px;
float: left;
}
well I would set fixed width for a.
a {
display: inline-block;
width: 100px; /*whatever number you need*/
}
You can try witch is for Non Breakable Space.
Imagine the following illustrative HTML:
<form>
<div class="line">
<label class="lbt" for="name">Name:</label>
<span class="obr">*</span>
<input id="name" class="inp" type="text" />
<span class="err">Missing!</span>
</div>
<div class="line">
<label class="lbt" for="area">Area:</label>
<input name="area" class="inp" type="text" />
<span class="suf">m<span style="vertical-align: super;">2</span></span>
<span class="err">Missing!</span>
</div>
</form>
By client requirement, both the label and the span with the obligatory indicator must be in the same line, being the input and the rest of the spans in the next line.
The obligatory indicator must be right after the label text and the other spans right after the input element.
Sadly I can't change the HTML code or I would put the obligatory element inside the label and use a display: block style (or wrap both in a span and do the same).
I tried using the .obr::after to create a line break but since this element doesn't always exist and I can't use ::before in an input element so I tend to believe using content isn't feasible unless there's a way to put it conditionally (.lbt::after or in .obr::after if exists). Here's a jsfiddle with this problem.
I also tried float and positions approaches but haven't found a good generic solution that could fit any label or input size.
I may consider using jQuery for this, but I would prefer a simpler approach only by CSS.
Been almost two days trying to find a good solution...
label and the * <span> right beside each other.
<input /> and the other <span> beside each other on another line.
.line
{
border: 2px solid black;
padding: 5px;
overflow:hidden;
}
.line .obr
{
color: Red;
font-weight: bold;
float:left;
}
.lbt
{
float:left;
}
.line .obr::after
{
content: '\A';
white-space: pre;
}
.inp
{
float:left; clear:both;
margin-top:5px;
}
.line span
{
float:left;
}
Check this out : http://jsfiddle.net/AliBassam/2LqCc/
If you want the <span> beside the <input /> to be lower then add margin-top:5px;