I am trying that when I check the box with id "expand", the rest is shown, and normally while the box is unchecked, it is not shown, but I can't get it to show, any tips or ideas?
div div p {
display: none;
}
#expand:checked .checkbox {
display: block;
}
<fieldset>
<div>Pincha para recibir información:
<input type="checkbox" class="checkbox" id="expand" value="yes">
<div class="checkbox">
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Tenerife</p>
</div>
</div>
You can do it by using the sibling selector, +, and targeting the container div instead of the paragraph:
div div.checkbox {
display: none;
}
#expand:checked + .checkbox {
display: block;
}
<fieldset>
<div>Pincha para recibir información:
<input type="checkbox" class="checkbox" id="expand" value="yes">
<div class="checkbox">
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Tenerife</p>
<p><input type="checkbox"> Tenerife</p>
</div>
</div>
Related
I have a code like this:
<div class="days" style="width:300px;">
<input id="monday" type="radio" name="monday" value="1">
<label for="monday"> monday</label>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday"> tuesday</label>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday"> wednesday</label>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday"> thursday</label>
</div>
And here is jsfiddle - https://jsfiddle.net/k96x02qL/
So as you see, for some values of width of the main div, sometimes there is a situation, when label is on a new line, but radiobutton is not (picture one):
picture one
So i want to see something like this (with any value of width of main div) (picture two):
picture two
How can i implement it? For some reason i can't wrap input and it's label in one more div. Only can add some styles using "name" html attribute or something like this...
You can do this without changing the HTML by not showing the input button (opacity: 0) and putting a 'pretend' button in a pseudo element before each label.
This snippet uses a couple of Unicode circles to do this but of course you may want to do it another way - e.g. a background radio gradient or an image.
This way the label as a whole goes across whole if there isn't room for it at the end of a line.
input {
opacity: 0;
position: absolute;
left: 50px
}
input:checked+label::before {
content: '\26ab';
}
label {
position: relative;
}
label::before {
content: '\26aa';
margin-right: 5px;
position: relative;
}
<div class="days" style="width:300px;">
<input id="monday" type="radio" name="monday" value="1">
<label for="monday"> monday</label>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday"> tuesday</label>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday"> wednesday</label>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday"> thursday</label>
</div>
You can use nested label/component to frame the radio component as a single box, after that add flex layout to styled the main container (div with class .days) with flex-wrap: wrap css property to auto add line break when content is bigger than container width:
.days {
display:flex;
flex-wrap: wrap;
}
<div class="days" style="width:300px;">
<label for="monday">
<input id="monday" type="radio" name="monday" value="1"> monday
</label>
<label for="tuesday">
<input id="tuesday" type="radio" name="tuesday" value="2"> tuesday
</label>
<label for="wednesday">
<input id="wednesday" type="radio" name="wednesday" value="3"> wednesday
</label>
<label for="thursday">
<input id="thursday" type="radio" name="thursday" value="4"> thursday
</label>
</div>
<br/>
Variant for your case:
<div class="days" style="width:300px;">
<div>
<input id="monday" type="radio" name="monday" value="1">
<label for="monday"> monday</label>
</div>
<div>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday"> tuesday</label>
</div>
<div>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday"> wednesday</label>
</div>
<div>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday"> thursday</label>
</div>
</div>
I'm just learning how forms, inputs, and fieldsets are working, so I'm trying to make replicate the image above with my own code. So far, I have been able to figure out most of it, but I don't know how to properly put the button in line with the bottom of the third div. I tried a span tag with vertical-align: bottom, but that did not work. Also, I tried to make a div and use vertical-align bottom, which didn't work either. I think I just have a poor understanding of vertical-align, so if you could help it would be greatly appreciated.
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div style="width: 250px; float: left;">Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div style="width: 250px; float: left;"> Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div style="float: left;">Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button>
</fieldset>
</form>
</body>
3 issues:
1: you were missing a " on your body tag
2: when you use float:left you take the element out of the flow of the dom. In this case it's better to use display:inline-block
3: add display:block, margin-left: your a tag
NOTE: your form looks pretty good.
a{
display:inline-block;
margin-left:10px;
}
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div style="width: 250px; float: left;">Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div style="width: 250px; float: left;"> Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div style="display:inline-block;">Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button>
</fieldset>
</form>
</body>
But a better way is to use flex:
#container{
display:flex;
justify-content:space-around;
align-items:bottom;
align-items:flex-end;
}
<body style="background-color:#EEEEEE">
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
First Name: <input type="text" name="first" placeholder="Joey" size="25">
      Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
<br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
City: <input type="text" name="city" placeholder="York">
Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
</fieldset>
<fieldset style="width: 750px;">
<legend>Payment and Shipping</legend>
<div id='container'>
<div >Payment:<br>
<input type="radio" name="payment" value="Visa">Visa<br>
<input type="radio" name="payment" value="MasterCard">MasterCard<br>
<input type="radio" name="payment" value="Paypal">Paypal</div>
<div > Shipping:<br>
<input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
<input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
<input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
<div> Discounts:<br>
<input type="checkbox" name="discounts" value="AAA">AAA<br>
<input type="checkbox" name="discounts" value="AARP">AARP<br>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
<button type="button">Join Now!</button> </div>
</fieldset>
</form>
</body>
You should use label tags here for all your field label.
Each radio button list should also bee in it's own fieldset
Also don't use tags like br or elements like for spacing, user margin or padding instead.
Let's now encapsulate the radio buttons and the labels in a label tag. That will help up align the link. Don't use a button in a link, it's invalid HTML and can result in odd behavior. Instead, style the link appropriately, I'd keep it looking like a link as it is an actual link to an external site opening in a new tab.
body {
background-color: #EEEEEE
}
.flex {
display:flex;
}
label.wide {
padding-right: 1em;
}
label {
white-space:nowrap;
padding-bottom:0.5em;
display:inline-block;
}
fieldset fieldset {
border: none;
padding-bottom:0;
}
#paymentShippingFields fieldset label {
display: block;
padding-bottom:0;
}
#paymentShippingFields fieldset {
border:none;
width:33%;
}
<form name="data" action="https://www.hats.com" method="POST">
<fieldset style="width: 750px;">
<legend>Ordering Information</legend>
<fieldset id="nameField">
<label class="wide">First Name: <input type="text" name="first" placeholder="Joey" size="25"></label>
<label>Last Name: <input type="text" name="last" placeholder="Shmoey" size="25"></label>
</fieldset>
<fieldset id="addressField">
<label>Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30"></label>
<label>State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2"></label>
<label>City: <input type="text" name="city" placeholder="York"></label>
<label>Zip: <input type="text" name="zip" placeholder="17402" maxlength="5" size="8"></label>
</fieldset>
</fieldset>
<fieldset style="width: 750px;" id="paymentShippingFields">
<legend>Payment and Shipping</legend>
<div class="flex">
<fieldset>
<legend>Payment:</legend>
<label><input type="radio" name="payment" value="Visa">Visa</label>
<label><input type="radio" name="payment" value="MasterCard">MasterCard</label>
<label><input type="radio" name="payment" value="Paypal">Paypal</label>
</fieldset>
<fieldset>
<legend>Shipping:</legend>
<label><input type="radio" name="shipping" value="Priority $7.99">Priority %7.99</label>
<label><input type="radio" name="shipping" value="Standard $3.99">Standard $3.99</label>
<label><input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</label>
</fieldset>
<fieldset>
<legend>Discounts:</legend>
<label><input type="checkbox" name="discounts" value="AAA">AAA</label>
<label><input type="checkbox" name="discounts" value="AARP">AARP</label>
<label>
<input type="checkbox" name="discounts" value="Haltz Member">Hatz Member
Join Now!
</label>
</fieldset>
</div>
</fieldset>
</form>
I want the checkboxes to be parallel to each other and the text to be aligned the same.
This is what i have (i'm new to this):
<input type="checkbox" name=”liste1” value="1">This is Example1<br>
<input type="checkbox" name=”liste1” value="2">Example2<br>
<input type="checkbox" name=”liste1” value="3">Example123456<br>
<input type="checkbox" name=”liste1”` value="4">Option4<br>
This is how it looks like
When a parent element is allowed to display: flex, each child element will be aligned vertically when the align-item: center is declared
div {
display: flex;
gap: 3px;
align-items: center
}
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4</label>
</div>
To start with, we'll correct the original version of the code:
” is not a valid quote to use in HTML, you should use either " or '
If an HTML tag doesn't have a closing tag (e.g. <p>content</p>) then it is referred to as self-closing, and should have a slash before the closing angle bracket, like this: <input />
This gives us:
<input type="checkbox" name="liste1" value="1" />This is Example1<br />
<input type="checkbox" name="liste1" value="2" />Example2<br />
<input type="checkbox" name="liste1" value="3" />Example123456<br />
<input type="checkbox" name="liste1" value="4" />Option4<br />
This is enough to get it to look right, however generally if you want to show text next to a checkbox, you want it to be clickable and affect the checkbox. The simplest way to do this is to wrap the input and it's label text inside a <label> element, like so:
label {
display: block;
}
input,
span {
vertical-align: middle;
}
<label>
<input type="checkbox" name="liste1" value="1" />
<span>This is Example1</span>
</label>
<label>
<input type="checkbox" name="liste1" value="2" />
<span>Example2</span>
</label>
<label>
<input type="checkbox" name="liste1" value="3" />
<span>Example123456</span>
</label>
<label>
<input type="checkbox" name="liste1" value="4" />
<span>Option4</span>
</label>
(I also used a small CSS rule instead of the <br /> tag, as it's generally preferable to use CSS for layout)
your picture says column but your question says row. Which one do you want?
#container {
display: flex;
flex-direction:column;
gap: 13px;
align-items: center
}
#container2 {
display: flex;
margin-top:20vw;
gap: 83px;
justify-content:center;
}
<div id='container'>
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2 xxx</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3 xxx xxx</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4 xxx</label>
</div>
</div>
<div id='container2'>
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4</label>
</div>
</div>
I have a dialog that will display the orders of my site, along with the contents of each. Each order has its own box. I'm having problems getting the divs formatted to show the maximum number of boxes in a row.
This jsfiddle shows the problem. As you can see, the boxes are squeezed into one row and the rows in each box break to a new line, which I don't want.
I have the widths set in the css and dialog code but what I really want is a dialog that opens to the full width, or maybe 90%, of the main page.
Would someone please point out my mistakes?
<style>
.test-container {
display: -webkit-flex;
display: flex;
-webkit-reorder-direction: row-reverse;
reorder-direction: row-reverse;
width: 600px;
height: auto;
background-color: lightgrey;
}
.test-item {
background-color: cornflowerblue;
width: 33%;
margin: 10px;
}
</style>
$(document).ready(function() {
$("div").dialog({
modal: true,
title: "My Dialog",
minHeight: 100,
minWidth: 200,
maxWidth: 500,
maxHeight: 250,
});
});
<div class="test-container">
<div class="test-item">Ordered On: 11/19/2014
<div><input name="qty_0" value="1" type="hidden">
<input name="attr_0" type="hidden">
<input name="pid_0" value="788" id="ck_0" type="checkbox"> <label for="ck_0">aaa_Credit Card</label>
</div>
</div>
<div class="test-item">Ordered On: 10/27/2014
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
</div>
<div class="test-item">Ordered On: 11/27/2014
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
</div>
<div class="test-item">Ordered On: 08/27/2015
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
</div>
</div>
An initial setting on flex items is flex-shrink: 1. This means that flex items will shrink to avoid overflowing the container. That's why your lines of text of wrapping. To see what I'm talking about, add flex-shrink: 0 to your .test-item elements. revised demo 1
What you may be looking for is to have the space in the container distributed evenly across items. Consider also releasing the width limitation on the container. revised demo 2, revised demo 3
anyone know how to add an active state to the labeled radio-button?
HTML:
<label class="blacksize" for="XS">
<input type="radio" name="comment" value="XS" size="50" required checked>XS<br>
</label>
<label class="blacksize">
<input type="radio" name="comment" value="Small" size="50" required>S<br>
</label>
<label class="blacksize">
<input type="radio" name="comment" value="Medium" size="50" required>M<br>
</label>
<label class="blacksize">
<input type="radio" name="comment" value="Large" size="50" required>L<br>
</label>
<label class="blacksize">
<input type="radio" name="comment" value="XL" size="50" required>XL<br>
</label>
<label class="blacksize">
<input type="radio" name="comment" value="XXL" size="50" required>XXL<br>
</label>
Which CSS-styling can I use to make the selected radio's label have an "active"/"selected" state as you have in menus etc?
LIKE THIS: http://i.cubeupload.com/xURJ8M.jpg
Instead of "checked" try:
<input type="radio" name="comment" value="XS" size="50" required checked="checked">
For css styles you can just use :checked pseudo class.
input[type=radio]:checked {
box-shadow:red 0px 0px 0px 5px;
}
Check out this fiddle - http://jsfiddle.net/K2Kgf/
HTML:
<input type="radio"/>
<label></label>
CSS:
input[type="radio"]:checked + label {
}