I got this snippet from another question here on stackoverflow:
Snippet
If I put these checkboxes in a table, one checkbox per row, they overlap due to the padding of the labels. Why does this happen? Why doesn't the table cells change their height?
And how can I fix it?
Also, 'width: 100%' does not work for the label
Try
tr {
display:block;
margin:10px 0px;
}
Or without adding table styles
label{
display: block;
}
Also, I made a codepen here
Related
I am using tooltips in bootstrap3.
If you hover over the gap between the lines in the 'Position' column in the table example, the tool tip will disappear. Notice that the mouse pointer changes from arrow to 'text'.
How do I get it so that the tooltip is always displayed when hovering over the cell.
Note that I tried to move the tooltip to the parent td, but this is no good because when hovering it brings in a div which breaks the table formatting.
I believe it should be possible to solve this using CSS.
JSFiddle
Thanks for the answers which got me to the solution.
Either using div (not span) solves the issue, or declaring the following css:
[data-toggle="tooltip"]{
display: block;
}
this happen because the td have a padding of 8 px- to fix it try that:
[data-toggle="tooltip"]{
display: block;
cursor: pointer;
padding:8px;
}
.table>tbody>tr>td{
padding:0;
}
I am trying to create a form with checkboxes lined horizontally that can be scrolled left/right, while maintaining that each checkbox is styled to look like a button. (as shown here)
Unfortunately, the checkboxes keep wrapping onto the next line and I can't figure out why.
Here is my code:
http://jsfiddle.net/markocalvocruz/55jp59ho/
I was using this website as a reference:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_hor_scroll
The link aboveworks with a list of tags as shown. My guess is that there is an issue with applying display: inline-box to a <label> tag. I tried to replace <label> with <span> but then I am unable to make the checkboxes look as I want them to (and it doesn't fix the problem either).
Wrap all .ck-button divs under another div with id="container", then add following css
#container{
width:2000px;
}
and for your buttons do the following:
.dates form .ck-button label{
width:100%;
height:100%;
}
.dates .ck-button input:checked + span{
width:100%;
height:100%;
}
Here is my website, http://yetiagenda.com/submission.php.
There is no space between the radio group and the firstName input.
The two were on the same line at first, but I put "clear:both;" on the firstName.
Now, I can't put space between them.
Add overflow:auto to your radioRole div.
Consider using the following CSS in .subElse
padding-top: 15px;
As #j08691 said, you need to clear the floats in your container div. This should work.
#wrap > div.content > div.submitSchool > form > ul > div.radioRole {
overflow: auto;
}
This is a bit of a strange question, but a rather specific case. I'm trying to shoe-horn modern styles into a legacy website. Part of the issue is the CSS reset that's part of the new styles, which includes this piece of CSS:
table {
width: 100%;
}
In the legacy website, they didn't have this style and have styled the website assuming that a table will shrink-to-fit. On the surface, this is a simple addition to a transitional style sheet:
table {
width: auto;
}
However, every now and again, the table elements have a width attribute. Without any CSS applied, this attribute is respected but as soon as the CSS "fix" is applied, the tables reduce in size to their minimum.
I can write some JavaScript to detect tables that have a width attribute and use that to define their styles, but I'm curious: is there a way to do it in pure CSS?
You can exclude based on an attribute using :not():
Link to demo : http://tinker.io/8e18e/0
/* styles for tables with no "width" attribute */
table:not([width]) {
width: auto;
}
No, CSS has no way to say "Use the obsolete presentational attribute that this property replaces" or similar.
Yes. Remove the width attribute and define their widths using CSS instead of a deprecated attribute. Add some sane table classes, and give those classes the widths you're expecting.
you could for test change display of table, to not have to set width and deal with padding, margin or box-sizing.
http://tinker.io/8e18e/1
table {
display:block;
background:gray;
}
td, tr {
width:100%;
display:table-cell;
}
table[width], tr {
border: 1px solid;
table-layout:fixed;
display:table;
}
Hi,
I have the following HTML :
<div class="controlTitleContainer ">
<label for="test">Titel</label>
<div class="q"> </div>
</div>
The CSS looks like this
.controlTitleContainer .label
{
font-size: 0.94em;
color: #778899;
display:inline;
}
.controlTitleContainer .q
{
background-image: url("Images/Common/Icons/questionMark_15x14.png");
height: 14px;
width: 15px;
float:left;
}
The problem is that the div will be placed to the left of the label instead of to the right? Why?
I have tried to switch the div to a span with no success. Also If I change the div to a img intead then it will work but there is some unvanted margins that I can´t remove with the div element.
Pleas advice
Edit1: The confusions in the question should now be fixed, sorry for that.
MySolution : I created two div elements (one for text and one for icon) and then set float to left on both.
You're quite confused. You talk about IMG in question title, then you present SPAN in your code and afterwards talk about DIV in your text.
But I guess all three refer to SPAN in your code since you do set a background image to your SPAN element.
Solution
Anyway. Your span is floated left according to your CSS. If you remove the following line in your style sheet, your span will appear to the right of your label:
float: left; /* <- remove this */
Edit: I suppose your question got downvoted due to this confusion. If you want the community to help with detailed answers the least you could do is to take the time to formulate your question with the same amount of care as you expect back.
Do you not want the image to the right of the label? You have specified float: left;. You may also want to change .label to label in line one of the css code.
You could use the "CSS :after Selector"
Link : http://www.w3schools.com/cssref/sel_after.asp
Floats can be tricky... I would just make sure that the label is inline or inline-block, and that your image or image container also is inline or inline-block. They would then be aligned as text on a row. Yeay!