I have a bunch of radio buttons with labels of variable length. I was wondering how I can horizontally center them so that the labels are at the center of the page, but appear 'left aligned'.
Desired outcome:
Current HTML code:
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length</label><br />
display: table is good for this: http://codepen.io/pageaffairs/pen/vKkAq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {display: table; margin: 0 auto; padding: 30px; background: #e7e7e7; border: 1px solid black;}
</style>
</head>
<body>
<div>
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text</label><br>
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable</label><br>
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length</label>
</div>
</body>
</html>
One way to do it is by using a <div> which is center-aligned, and then use a <span> styled as an inline-block,
<div style="text-align: center;">
<span style="text-align: left; display: inline-block; border: 1px solid grey; padding: 0.5em;">
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length</label><br />
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length variable lenght</label><br />
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length variable</label><br />
</span>
</div>
you can use a borderless table and have the actual radio buttons separate from their labels.
or if you don't want to use a table, use divs with relative positioning and perhaps attribute float set to left.
Related
I have the task of implementing a star review.
I assume that I need to set a rule on the label, since the inputs are hidden. My question is, how can I give the stars a color of black even after being clicked. I know that the active pseudo-class only works when being clicked. Is there another pseudo-class for this? The goal of is to do this only using HTML/CSS.
<div class="rating-stars" id="rating-stars-features">
<input class="rating-radio visuallyhidden" type="radio" id="rating-features-1" value="1" />
<input class="rating-radio visuallyhidden" type="radio" id="rating-features-2" value="2" />
<input class="rating-radio visuallyhidden" type="radio" id="rating-features-3" value="3" />
<label class="rating-star" for="rating-features-1">★</label>
<label class="rating-star" for="rating-features-2">★</label>
<label class="rating-star" for="rating-features-3">★</label>
</div>
You can achieve a HTML/CSS only star rating system that has good browser support by utilising the CSS subsequent sibling selector ~ with flexbox row-reverse for left-to-right stars:
.rating-stars {
display: flex;
flex-flow: row-reverse;
width: fit-content;
}
.visuallyhidden {
display: none;
}
.rating-radio:checked~.rating-star {
color: gold;
}
<div class="rating-stars" id="rating-stars-features">
<input class="rating-radio visuallyhidden" type="radio" name="stars" id="rating-features-1" value="1" />
<label class="rating-star" for="rating-features-1">★</label>
<input class="rating-radio visuallyhidden" type="radio" name="stars" id="rating-features-2" value="2" />
<label class="rating-star" for="rating-features-2">★</label>
<input class="rating-radio visuallyhidden" type="radio" name="stars" id="rating-features-3" value="3" />
<label class="rating-star" for="rating-features-3">★</label>
</div>
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 am trying to get my gender button to align with my radio image buttons this is the codes have so far. It gives me the text above the button. Thank you in advance
<div class="genderalign">
<p>Choose:</p>
<input type="radio" name="option" value="1" id="choose-1" />
<label for="choose-1">
<img src="/images/femaleC.png" />
</label>
<input type="radio" name="option" value="2" id="choose-2" />
<label for="choose-2">
<img src="/images/maleC.png" />
</label>
</div>
I've corrected the misplaced </div> so your HTML is now like this.
Then just apply flexbox
.genderalign {
display: flex;
align-items: center;
}
<div>
<div class="genderalign">
<p>Choose:</p>
<input type="radio" name="option" value="1" id="choose-1" />
<label for="choose-1">
<img src="/images/femaleC.png"/>
</label>
<input type="radio" name="option" value="2" id="choose-2" />
<label for="choose-2">
<img src="/images/maleC.png" />
</label>
</div>
</div>
I have used display:flex to style a number of radio buttons so that they appear side by side, rather than in one long column. I thought by using margin:auto in combination with this, the child elements would appear grouped but in the center of the page horizontally. Clearly this isn't the case, so any help would be appreciated please.
Here is what I have currently:
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: red;
display: inline-block;
line-height: 4vw;
text-align: center;
width: 18vw;
}
label {
background-color: orange;
display: inline-block;
line-height: 4vw;
color: white;
text-align: center;
width: 18vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section style="display:flex; margin:auto;">
<div>
<p>Amount:</p>
</br>
<input type="radio" name="Amount" id="Amount1" value="single" / checked>
<label for="Amount1">Amount 1</label>
</br>
</br>
<input type="radio" name="Amount" id="Amount2" value="multi" />
<label for="Amount2">Amount 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Term:</p>
</br>
<input type="radio" name="Term" id="Term1" value="0" / checked>
<label for="Term1">Term 1</label>
</br>
</br>
<input type="radio" name="Term" id="Term2" value="1" />
<label for="Term2">Term 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Phone:</p>
</br>
<input type="radio" name="Phone" id="Phone1" value="0" / checked>
<label for="Phone1">Phone 1</label>
</br>
</br>
<input type="radio" name="Phone" id="Phone2" value="1" />
<label for="Phone2">Phone 2</label>
</div>
</section>
I have used viewport width throughout the project, as I have further CSS styling to change element sizes based on media queries. So I need a solution that still keeps this styling if possible.
Using the following should help:
justify-content: center
On the display:flex class.
Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have a set of radio buttons inside a div which has a fixed height and overflow:hidden. Some of the radios get hidden because they would be naturally positioned outside the height of the containing div.
When a radio is selected, and that radio is outside the visible part of the div, the div gets scrolled.
What I want is to be able to lock the scrolling of the div, regardless the currently checked radio is visible or not. I don't want the div to scroll.
Instructions to reproduce:
In FF/IE:
Click on a radio button
Use up/down arrows
Here is the code: http://www.jsfiddle.net/kANKu/1/
<div style="width:200px; height:100px; border: solid 1px red; margin:0 auto;overflow:hidden;">
<input type="radio" name="rad1" value="hello" id="hello1" /><label for="hello1">hello1</label> <br />
<input type="radio" name="rad1" value="hello" id="hello2" /><label for="hello2">hello2</label> <br />
<input type="radio" name="rad1" value="hello" id="hello3" /><label for="hello3">hello3</label> <br />
<input type="radio" name="rad1" value="hello" id="hello4" /><label for="hello4">hello4</label> <br />
<input type="radio" name="rad1" value="hello" id="hello5" /><label for="hello5">hello5</label> <br />
<input type="radio" name="rad1" value="hello" id="hello6" /><label for="hello6">hello6</label> <br />
<input type="radio" name="rad1" value="hello" id="hello7" /><label for="hello7">hello7</label> <br />
<input type="radio" name="rad1" value="hello" id="hello8" /><label for="hello8">hello8</label> <br />
<input type="radio" name="rad1" value="hello" id="hello9" /><label for="hello9">hello9</label> <br />
</div>
This is indeed a very strange request you have here. I have absolutely no idea what you are trying to accomplish here. However here is your Solution:
Firefox scrolls the selected item into view, thats just a a build in behaviour. There is no specification or magic attribute for that or something.
However you can do a little hack which i did in the example below:
You could play around with onkeydown events or onfocus and reset the scrol in javascript but that would be nonsense.
Just place the elements that you don't want to get scrolled to inside the visible area. I did it on the top right.
Then make it visibility:hidden et voilá.
It will be selected on arrow down and the value etc will still be submittet (i tried it with wrapping an missing form tag around the whole thing and a submit button).
This is very ugly and in my understanding absolutely weird and stupid, but as I said i don't know what your goals are!
Here comes your updated code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
#strangediv {
position: relative;
}
#strangediv input.invisible {
top: 0px;
left: 0px;
position: absolute;
visibility: hidden;
}
</style>
</head>
<body>
Try this in FF/IE
<div id="strangediv" style="width:200px; height:100px; border: solid 1px red; margin:0 auto;overflow:hidden;">
<div id="holder">
<input type="radio" name="rad1" value="hello" id="hello1" /><label for="hello1">hello1</label> <br />
<input type="radio" name="rad1" value="hello" id="hello2" /><label for="hello2">hello2</label> <br />
<input type="radio" name="rad1" value="hello" id="hello3" /><label for="hello3">hello3</label> <br />
<input type="radio" name="rad1" value="hello" id="hello4" /><label for="hello4">hello4</label> <br />
<input type="radio" name="rad1" value="hello" id="hello5" /><label for="hello5">hello5</label> <br />
<input type="radio" name="rad1" value="hello" id="hello6" class="invisible" /><label for="hello6">hello6</label> <br />
<input type="radio" name="rad1" value="hello" id="hello7" class="invisible" /><label for="hello7">hello7</label> <br />
<input type="radio" name="rad1" value="hello" id="hello8" class="invisible" /><label for="hello8">hello8</label> <br />
<input type="radio" name="rad1" value="hello" id="hello9" class="invisible" /><label for="hello9">hello9</label> <br />
</div>
</div>
</body>
</html>