I have a html table column defined like this:
<td>
<form:checkbox cssClass="check" path="somePath" id="somePath" onclick="someFn(this);" />
<form:label path="somePath" for="somePath"><spring:message code="label.someLabel" /></form:label>
<div>11</div>
</td>
So there is a checkbox, a label and a div element with text of '11'.
Now the 11 shows up below the checkbox. But i want it to show to the right of the label.
Why is this happening?
div is a block element, consider using span (or other inline element) or styling div as display:inline;
http://en.wikipedia.org/wiki/Span_and_div#Differences_and_default_behavior
Related
When I hover over the table cell, it should show the Angular Bootstrap popover next to the text upon over. However, the 'span' element is still its full width.
<td style="max-width: 50px; text-align: left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
<span popover="I appeared on mouse enter!" popover-trigger="mouseenter" popover-placement="right" >This is some text. This is some text. This is some text. This is some text. </span>
</td>
Screenshot of issue
How can I get the popover to display directly next to the text?
I tried putting a max width on the span itself, but that didn't seem to work.
Think I found a solution:
1) Change the 'span' element to a 'div'
2) Add this styling to the div:
style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"
I want to select CSS element that are outside of the parent selector. Can I do that with just CSS? Below are the example that I want to achieve:
<p>Register Form</p>
<div>
<p>Full Name :</p>
<p><input type='text' name='name' required></p>
</div>
<p>Please fill in the box above</p>
I want make the <p> after the div to be hidden if the input type is not empty. Below are the style that I have tried but with failed result:
<style>
div > p input:required:valid + p {
display: none;
}
</style>
Sadly this can't be done with pure css. You can't modify parents of elements with css, only children and subsequent siblings.
You could have javascript toggle a class on the parent div when its child input is valid/invalid, and then use CSS to modify the parent div's sibling.
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.
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>
Given the html code below:
<tr>
<td>Some text Some link <button>Some Button</button></td>
</tr>
I would like to achieve something like this:
Would I need to add additional mark-up such as wrapping divs to float one to the left and the other to the right? I would also need elements within the td to be vertically aligned.
What would be the best way to achieve this with minimal additional mark-up.
I have sample code here: http://jsfiddle.net/stormwild/AAw78/17/
A related problem is how to keep alignment of the text consistent among table cells when one cell contains a floated element?
CSS: td button { float: right; }
sorted.
Hi now give to float element in your buttton
<button style="float:right;">Some Button</button>
Demo
or
<button class="fr">Some button</button>
Css
.fr{
float:right;
}