Custom checkBox with midle alligned label text - html

i have a custom checkbox markup with label warped please check this link
jsfiddle.net/jhCH2/4/
I need to middle align the lable text with respect to the check-box div.
please note that the learn more link should be outside label element and same line of label.

you cannot vertically-align-middle a paragraph next to a check-box.....
Label tag is for labels, not paragraphs, you should use <p> instead....
For middle alignment of label not a paragrap use :
label{
vertical-align: middle
}
demo here
EDIT
indented demo
You'll have to use float:left to indent the text.
Also, since you have absolute positioned divs, move the input out of label to indent it, like :
<input type="checkbox" name="cb" />
<label for="cb"></label>

Related

Align a checkbox input and a <p> tag in the same line

I've seen most of the other solutions to this problem using a label. Unfortunately, I can't use label on this particular case, because that will mess things up. What I have is the following:
<div className="terms-checkbox">
<input type="checkbox" required />
<p>I accept the Terms and Conditions</p>
</div>
And I'm setting display to be inline-block for terms-checkbox like so:
.terms-checkbox {
display: inline-block;
}
However, this does not align the items horizontally/in the same line. Without wrapping the input tag with label, how can I make the checkbox and p tag align horizontally?
Here's the fiddle link: https://jsfiddle.net/eu5rso2a/1/
edit: fixed indentation.
You must set the terms-checkbox class to input or p tag. Not their parent.
Means your input and p tag must be inline-block
<p><input type="checkbox" required/>I accept the Terms and Conditions</p>

Child element overlapping parent element width

Why is my input element wider than my label that it is inside? Should My input not be the same width as the containing label? As I have said width:100% and it is inside the label?
<label class="km-listview-label question" style="height: 2.5em; display:inline-block; width:20%;">
<input style="left:0; width:100%; display:inline-block; " data-description="Height" data-control="Text" data-code="Q3" data-type="Measurement" type="text">
</label>
<label style="display:inline;">m</label>
How do I make the input the same width as the label it is inside? Because I need the "m" to show up to the right of the input, so that it is like a meters unit measurement. However, when I type a lot of characters, they cover the "m". Here are images of the padding of the label and the input, using a debugging tool to look at elements:
Label:
Input:

Input and button inline

Is there a multi-browser way to inline input and button? See http://jsfiddle.net/wf592/. Input appears below button. Simple margin doesn't help:
<div>
<input type="text" style="margin-top:-50px;" /><button style="height:25px; width:20px" />
</div>
This error showed up when I used jQueryUI calendar: calendar button is automatically inserted after the input tag. So I don't want to change markup with more divs.
Demo Fiddle
Add:
input, button{
vertical-align:middle;
}
More on vertical-align from MDN:
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.

Center text vertically next to a one row textarea?

I want the text that sits next to a one row textarea to be centered vertically with the textarea.
This is the default behavior if I put text next to an input of type="text".
Id like to stick with the single row textarea rather than an input here because this field is there for the user to paste a fair amount of pre formatted data into. The user wont normally care what the data says or need to see it unless the program finds a problem. If a problem is found an error is shown, at which point its helpful if the user can drag out the text area to view the data and research the issue.
My Code:
<tr>
<td class="vert" > New PNR Info
<textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></td>
<td align="center">Change Fee
<input type="text" size="4" id="fee"name="fee"></td>
</tr>
Ive Tried:
css like this:
.vert {
vertical-align: middle;
}
and this vertical-align: top;
and wraping the two in a p tag like this
<p>New PNR Info<textarea rows="1" cols="20" name="origInfo1" id="origInfo1" style="overflow:hidden"> </textarea></p>
to no avail.
If my question is not clear maybe a screenshot will help. I want the offending text by the red arrow to be cetered like the text by the green arrow.
Apply the vertical alignment to all elements like this
Demo
<p class="whatever">
<label for="alignme">Label Text</label>
<textarea id="alignme"></textarea>
</p>
.whatever * {
vertical-align: middle;
}
.whatever * is equivalent to
.whatever label, .whatever textarea {
vertical-align: middle;
}
It doesn't seem logical at first, but the vertical-align property needs to go on the taller element:
http://jsfiddle.net/N5NuA/
textarea {
vertical-align: middle;
}
I believe the problem is you are setting the parent (td or p) to align to the top and since your textarea is inside that element it aligns according to parent, not the text.
What I think will work is setting the textarea vertical alignment.
<textarea style="vertical-alignment:middle">
If that does not work, also change the parent element to middle. Also try text-top or text-bottom for the text-area if those changes do not work also.

Can you apply CSS only on text that is wrapped, i.e. the second and subsequent lines?

I want to put a margin-left on only the text that is wrapped, i.e. text after the first line:
This is text with no margin left
this text has margin left
Example
click to see
The input and the label are in 1 div and text is wrapped on the second line, which is what I want
but is it possible to have like a margin left on only the text that is wrapped on the second line
jsfiddle example of my problem
Yeah, sort of — I’d suggest combining padding-left and text-indent:
HTML
<div class="test">
<label for="2question1">
<input type="checkbox" id="2question1" name="2question" title="Merknaam 1" /> Very long text which is wrapped on the next line
</label><br>
<label for="2question2">
<input type="checkbox" id="2question2" name="2question" title="Merknaam 2" /> Merknaam 2
</label><br>
<label for="2question3">
<input type="checkbox" id="2question3" name="2question" title="Merknaam 3" /> Merknaam 3
</label><br>
<label for="2question4">
<input type="checkbox" id="2question4" name="2question" title="Merknaam 4" /> Merknaam 4
</label><br>
</div>
 CSS
.test {
width:200px;
}
.test label {
display: block;
padding-left: 1em;
text-indent: -1em;
}
text-indent applies only to the first line of text in a block-level element, so it should achieve what you want.
See http://jsfiddle.net/pauldwaite/qUvvv/
No, but you can apply CSS to the first line, so you could reverse your thinking to achieve the same effect.
Something like this:
.mytext {margin-left:-5em;}
.mytext:first-line {margin-left:0;}
Here's a JSFiddle example of it working: http://jsfiddle.net/4ckxJ/3/
See http://www.quirksmode.org/css/firstline.html for more info on the :first-line pseudo-class.
You could wrap the line you want to wrap in a span and apply:
display: block;
margin-left: 12px;
Giving it display: block will make it wrap to a new line and the margin pushes it off to the right.
as per your updated example, here's a fork JSFiddle
float the input and then make the label display block so it floats right in beside it - spacing created with padding and margin, overflow:hidden makes the text "not wrap" - then you also might want to remove the br's from your HTML