I can't seem to figure out how to stop the labels from wrapping here. Any thoughts?
<div>
<h4>Risk Category</h4>
<ul class="checkbox-grid">
<li><input type="checkbox" id="chkStrategic" value="Strategic" /><label>Strategic</label></li>
<li><input type="checkbox" id="chkEnvironmental" value="Environmental" /><label>Environmental</label></li>
<li><input type="checkbox" id="chkMarket" value="Market" /><label>Market</label></li>
<li><input type="checkbox" id="chkCredit" value="Credit" /><label>Credit</label></li>
<li><input type="checkbox" id="chkOperational" value="Operational" /><label>Operational</label></li>
<li><input type="checkbox" id="chkCompliance" value="Compliance" /><label>Compliance</label></li>
<li><input type="checkbox" id="chkBenefit" value="Benefit" /><label>Benefit</label></li>
<li><input type="checkbox" id="chkValue" value="Value" /><label>Value Delivery</label></li>
<li><input type="checkbox" id="chkProject" value="Project" /><label>Project Delivery</label></li>
<li><input type="checkbox" id="chkService" value="Service" /><label>Service Delivery</label></li>
<li><input type="checkbox" id="chkSecurity" value="Security" /><label>Security</label></li>
</ul>
</div>
Code Pen Showing the Problem
Thank you in advance.
JD
Set the display to inline instead of block. Block level elements tend to expand to their 100% width of the parent. inline or inline-block elements will align with their sibling elements.
#dialog-form label, input {
display: inline;
}
Updated Codepen
Simply add the following rules:
#dialog-form .checkbox-grid input,
#dialog-form .checkbox-grid label
{
display:inline;
}
The reason is that a previous rule set display:block to all label and input.
These new rules reset behaviour only for this kind of elements children of .checkbox-grid
Related
Hello I've got this style
.portfolio-filters input[type=checkbox]:checked{background:#cb2127}
and my code is
<ul class="portfolio-filters list-unstyled">
<li>
<div class="form-group">
<input id="custom-software" type="checkbox" name="" value="" checked="">
<label for="custom-software">Custom Software</label>
</div>
</li>
The problem is that inside this div form-group if I add hidden input fields, it breaks the CSS.
Do you have an idea how I can fix the problem?
How do you hide input? Your should use display:none if you don't want to maintain its position
I have a panelbar which displays a few divs/ULs. The lists, when their width is set to 40%, for example, cause the panelbar to slide farther down than it should, and then jump back up to where it 'should' be. Remove the 40% on the UL, and everything works as expected.
Version 2015.3.930 has this issue, whereas older versions (randomly picked 2011.3.1407) do not.
<ul class="doctypecontainer noselect">
<li style="clear:both;">
<span>Truck Freight Bill (1)</span>
<div class="doctypecontainercontent">
<div class="docdatelabel"><input type="checkbox" />10/27/2015</div>
<ul class="pagelist">
<li><input type="checkbox" /><span>Page 1</span></li>
<li><input type="checkbox" /><span>Page 2</span></li>
<li><input type="checkbox" /><span>Page 3</span></li>
</ul>
<ul class="pagelist">
<li><input type="checkbox" /><span>Page 4</span></li>
<li><input type="checkbox" /><span>Page 5</span></li>
<li><input type="checkbox" /><span>Page 6</span></li>
</ul>
<div class="docdatelabel"><input type="checkbox" />11/15/2015</div>
<ul class="pagelist">
<li><input type="checkbox" /><span>Page 1</span></li>
<li><input type="checkbox" /><span>Page 2</span></li>
<li><input type="checkbox" /><span>Page 3</span></li>
</ul>
<div class="docdatelabel"><input type="checkbox" />11/21/2015</div>
<ul class="pagelist">
<li><input type="checkbox" /><span>Page 1</span></li>
<li><input type="checkbox" /><span>Page 2</span></li>
<li><input type="checkbox" /><span>Page 3</span></li>
</ul>
<span style="clear:left; display:block;"></span>
</div>
</li>
</ul>
See fiddle here: http://jsfiddle.net/u48kLrem/
remove the width:40% from the pagelist class, and it slides as expected.
I don't know, man. I suspect that it has to do with the text wrapping (or something wrapping) and causing it to miscalculate the height. Probably just bad coding on their part, but a simple modification causes the jump to disappear. Also, this modification should make it more reliable/future-proofed too.
.pagelist {
padding-bottom:5px;
list-style-type:none;
padding-left:10px;
width: 50%; /* change this to 50% */
float: left;
box-sizing: border-box; /* add this to force it to calculate
the padding in with the width to
total 50% */
}
Demo: http://jsfiddle.net/jmarikle/2ekxpuu6/
I am writing an HTML5 page at the moment, I'm having an issue switching format from using br for line spacing to line-height, padding, or margin (whichever is easier). Everything is inside of a form and fieldset tag I do not want every line to be on their own, just some. Some text I do want next to each other because I am making a form that has radio buttons and check boxes. But instead of using br tags how I can switch that out to line-height, padding, or margin in css.
<form>
<fieldset class = "top">
Please Select a car: <br>
<input type="radio" name="car" value="truck">truck
<input type="radio" name="car" value="van">van
<input type="radio" name="car" value="suv">suv<br>
<input type="radio" name="car" value="coupe">coupe
<br>
<br>
<input type="checkbox" name="color" value="Blue">Blue
<input type="checkbox" name="color" value="red">red
<br>
<br>
<input type="checkbox" name="color" value="Orange">Orange
<input type="checkbox" name="color" value="black">Black
<br>
<br>
<input type="checkbox" name="color" value="Green">green
<input type="checkbox" name="color" value="brown">brown
<br>
<br>
....
Try to use a fieldset for each group of radios so you can control them more precisely, put margin only around your group and etc.
You can use labels and span around the label/input groups, so you can control them better.
<span>
<label for="name">Value</label>
<input type="checkbox" name="name" value="1"/>
</span>
Also if you use a class specific for your input, you can make it display in block, like this:
input.block {
display: block;
}
then if you put this class block on your input the label will stay in another line...
For a bigger picture see this fiddle:
http://jsfiddle.net/BxwNL/1/
Update: another solution according to cinnamon comment
You can also use a list for your items, but it would make sense if you grouped them according to their properties, like a list for the colours, a list for the types...
The usage would be like:
<ul>
<li>
<label for="name">Value</label>
<input type="checkbox" name="name" value="1"/>
</li>
<li>
<label for="name2">Value2</label>
<input type="checkbox" name="name2" value="2"/>
</li>
</ul>
Fiddle example for the list solution:
http://jsfiddle.net/BxwNL/2/
I have a list of checkboxes. The user can only select 10. I want to highlight the 11th (and greater) checked checkboxes with CSS to show they have to uncheck some. (I know there are other ways to do this including with JS and I understand the browser limitations; this is an exercise)
Checked checkbox labels are highlighted green, thusly:
li > input:checked + label {
color: green;
}
The 11th and greater checkbox label should be highlighted red:
li > input:checked:nth-child(n+11) + label {
background-color: red;
}
But this does not work. A simple test shows that I at least have the nth-child() syntax correct:
li:nth-child(n+11) {
background-color: red;
}
That works. Is there an issue using it with :checked or the + selector?
Edit: Fleshed out example with HTML
Here is what the HTML could look like:
<form action="#" method="get">
<ul>
<li><input type="checkbox" id="checks1" name="checks"> <label for="checks3">Test 1</label></li>
<li><input type="checkbox" id="checks2" name="checks"> <label for="checks3">Test 2</label></li>
<li><input type="checkbox" id="checks3" name="checks"> <label for="checks3">Test 3</label></li>
<!-- etc -->
</ul>
</form>
Here is a working JS fiddle with all scenarios above: http://jsfiddle.net/eQuEW/1/
In this example the first 12 boxes have been checked. Checked check boxes have green labels. Checkboxes 11 and up have bold text just as an example of what I'm talking about. Check box 11 and 12 should have a red background (but they do not). Then if, for example, the user were to de-select checkbox 1, the red background would no longer be on checkbox 11 as 2-11 represent the first 10 checked checkboxes and 12 represents the first one greater than 10 (and, therefore, in error).
This isn't possible with pure CSS no matter what the DOM structure. The reason is that :nth-child and :nth-of-type will always select the same elements regardless of other selectors. So :nth-child( n+11 ) will always select every select box after the 10th one. Adding another filter like :checked will just filter to all the checked inputs with an index > 10.
You can't filter the results of nth-child because it simply counts the number of previous siblings.
And just for the fun of it, to demonstrate what I mean: http://jsfiddle.net/u4xxA/1/
If i'm understanding you right, your HTML looks something like
<ul>
<li>
<input type="checkbox"...>
<label for="...">...</label>
</li>
<li>
<input type="checkbox"...>
<label for="...">...</label>
</li>
</ul>
If that's the case, you have a problem. See, CSS selectors work from the root down, and can't go in reverse. (Selecting a node based on its children doesn't work.) Add to that, :nth-child (and :nth-of-type, which is what i was originally going to suggest) will select nodes based on their index within the parent, which in this case is the <li> element. (That means there will never be an 11th checked box as long as each one is in its own list item.)
What you'd need is something like
(li:has(input:checked)):nth-of-type(n+11) label {
...
}
But :has and the parentheses doesn't exist in CSS, and from what i hear, it probably never will. You'll need to do this with JS.
(Edit: I had some mention of CSS that would work if you rearranged your HTML...but it turns out it didn't work. Pseudo-classes work independently of each other, so you'd always end up selecting the 11th box if it's checked, rather than the 11th checked box.)
Maybe a bit late to the party, but since all the other answers say it can't be done in CSS alone, here is the solution.
You can only do this if all the checkboxes are in the same container. So not one checkbox per list item. If you want the result to look like a list, you will have to add some more CSS.
input:checked + label {
color: green;
}
input:checked ~ input:checked ~ input:checked ~ input:checked
~ input:checked ~ input:checked ~ input:checked ~ input:checked
~ input:checked ~ input:checked ~ input:checked + label {
color: red;
}
/* Put each checkbox on a different line */
label:not(:last-child)::after {
content: '\000A';
white-space: pre;
}
<div class="list">
<input type="checkbox" id="checks1" name="checks"> <label for="checks1">Test 1</label>
<input type="checkbox" id="checks2" name="checks"> <label for="checks3">Test 2</label>
<input type="checkbox" id="checks3" name="checks"> <label for="checks3">Test 3</label>
<input type="checkbox" id="checks4" name="checks"> <label for="checks4">Test 4</label>
<input type="checkbox" id="checks5" name="checks"> <label for="checks5">Test 5</label>
<input type="checkbox" id="checks6" name="checks"> <label for="checks6">Test 6</label>
<input type="checkbox" id="checks7" name="checks"> <label for="checks7">Test 7</label>
<input type="checkbox" id="checks8" name="checks"> <label for="checks8">Test 8</label>
<input type="checkbox" id="checks9" name="checks"> <label for="checks9">Test 9</label>
<input type="checkbox" id="checks10" name="checks"> <label for="checks10">Test 10</label>
<input type="checkbox" id="checks11" name="checks"> <label for="checks11">Test 11</label>
<input type="checkbox" id="checks12" name="checks"> <label for="checks12">Test 12</label>
<input type="checkbox" id="checks13" name="checks"> <label for="checks13">Test 13</label>
<input type="checkbox" id="checks14" name="checks"> <label for="checks14">Test 14</label>
<input type="checkbox" id="checks15" name="checks"> <label for="checks15">Test 15</label>
<input type="checkbox" id="checks16" name="checks"> <label for="checks16">Test 16</label>
<input type="checkbox" id="checks17" name="checks"> <label for="checks17">Test 17</label>
<input type="checkbox" id="checks18" name="checks"> <label for="checks18">Test 18</label>
<input type="checkbox" id="checks19" name="checks"> <label for="checks19">Test 19</label>
<input type="checkbox" id="checks20" name="checks"> <label for="checks20">Test 20</label>
</div>
What I'd like to achieve is a layout like this
some label [ ] checkbox 1
[ ] checkbox 2
[ ] checkbox 3
[ ] checkbox 4
[ ] represents a checkbox
What markup and CSS would be best to use for this?
I know this would be easy to do with a table
I'm wondering if this is possible with divs
I would use this markup:
<div id="checkboxes">
<label>some label</label>
<ul>
<li><input type="checkbox"> checkbox 1</li>
<li><input type="checkbox"> checkbox 2</li>
<li><input type="checkbox"> checkbox 3</li>
<li><input type="checkbox"> checkbox 4</li>
</ul>
</div>
and these styles:
#checkboxes label {
float: left;
}
#checkboxes ul {
margin: 0;
list-style: none;
float: left;
}
Tables aren't evil, but they're used for the wrong reasons more often than not. They make for bigger html-files (bad for performance and bandwidth), usually with a more cluttered html-structure (bad for maintainability). As for tabular data however, they are excellent.
This very semantic HTML:
<fieldset class="checkboxgroup">
<p>some label</p>
<label><input type="checkbox"> checkbox 1</label>
<label><input type="checkbox"> checkbox 2</label>
<label><input type="checkbox"> checkbox 3</label>
<label><input type="checkbox"> checkbox 4</label>
</fieldset>
And this fairly simple CSS:
.checkboxgroup{
width: 20em;
overflow: auto;
}
.checkboxgroup p{
width: 7em;
text-align: right;
}
.checkboxgroup label{
width: 12em;
float: right;
}
Adjust widths as needed.
The proper way to do this really is to replace the p element in my HTML with a legend element, but this won't style the way you want it to without some pretty ugly CSS.
In my opinion its more some kind of list than a table (but You did not list the whole picture). To me it looks like a definition list so I would use it (if not I would stick to a unordered list example the Magnar solution, adding labels.
The definition list version:
<dl id="checkboxes">
<dt>same label or term</dt>
<dd><input type="checkbox" id="chk1" /><label for="chk1">checkbox 1</label></dd>
<dd><input type="checkbox" id="chk2" /><label for="chk2">checkbox 2</label></dd>
<dd><input type="checkbox" id="chk3" /><label for="chk3">checkbox 3</label></dd>
<dd><input type="checkbox" id="chk4" /><label for="chk4">checkbox 4</label></dd>
</dl>
<div style="float: left;">
some label
</div>
<div style="float: left;">
<input type="checkbox" /> checkbox 1<br />
<input type="checkbox" /> checkbox 2<br />
<input type="checkbox" /> checkbox 3<br />
<input type="checkbox" /> checkbox 4
</div>