htmlcssradio-buttonsemantic-ui-react
How do I create radio button grouped by labels on top
I am after this sort of structure in HTML:
Anyone know how I can achieve this so that the above labels are aligned accordingly with the radio buttons? The biggest problem I have is the horizontal labels above each radio button.
Just a pure html and CSS solution would be appreciated.
Here is my lame attempt, I am using Semantic UI React:
<div class="row question-row">
<div class="three wide column radio-statements"><p>Statement one</p><p>Statement two</p><p>
Statement three</p></div>
<div class="five wide column">
<form class="ui form radio-question"><label class="horizontal-label">High</label><label
class="horizontal-label">Medium</label><label
class="horizontal-label">Low</label><label class="horizontal-label">N/A</label>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="1"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="2"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="3"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="4"><label></label></div>
</div>
</div>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="5"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="6"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="7"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="8"><label></label></div>
</div>
</div>
<div class="inline fields">
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="9"><label></label></div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="10"><label></label>
</div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="11"><label></label>
</div>
</div>
<div class="field">
<div class="ui fitted radio checkbox"><input type="radio" class="hidden"
readonly="" tabindex="0"
value="12"><label></label>
</div>
</div>
</div>
</form>
</div>
</div>
CSS:
.ui {
.sub-section-grid {
.question-row {
margin-bottom: 30px;
}
.radio-statements {
top: 20px;
}
.horizontal-label {
margin-right: 20px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.57;
letter-spacing: normal;
text-align: left;
color: #868686;
}
.help-text {
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.67;
letter-spacing: normal;
text-align: left;
color: rgba(139, 142, 142, 0.7);
}
.info
{
&.circle {
margin-bottom: 20px;
margin-top: -40px;
}
}
}
}
Solution
How about using some good ol' html tables?
td {
width:20%;
}<table>
<thead>
<tr>
<td></td>
<td>High</td>
<td>Medium</td>
<td>Low</td>
<td>N/A</td>
</tr>
</thead>
<tbody>
<tr>
<td>Statement one</td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
</tr>
<tr>
<td>Statement two</td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
</tr>
<tr>
<td>Statement three</td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
<td><input type="radio"/></td>
</tr>
</tbody>
</table>- I am a beginner and I just started to learn java servlets and jsp. Can someone help me find the error in this code?
- How to prevent text moving when transitioning sibling element's width
- Printing a HTML template as PDF - Angular 2
- MJML : Outlook 1px horizontal when using direction rtl on mj-section
- HTML dialog focusing button element when opened
- Dynamic html and js
- Input regex for UK postcodes constantly invalid
- Put a star notation in a HTML page
- Can I have an onclick effect in CSS?
- Tailwind CSS height screen in mobile browser
- How do I tell if an HTML element has gone off the bottom of a page?
- Why select is not a input type in HTML?
- Margin different in Windows (Chome, Edge, etc.) and Mac OS (Safari)
- Print only html table using javascript
- How do I use the reverse border radius at the top of a card? (CSS)
- Allow only numbers into a input text box
- Stacked Bootstrap progress to show multiple ranges with tooltip
- Anchor link only works by "Open link in new tab" command
- How to block +,-,e in input type Number?
- Printing a webpages raw html data unformatted with tags and similar information
- Creating an end screen for my game using javascript, css, and html
- How do I include a HTML file in a Jinja2 template?
- CSS table layout: why does table-row not accept a margin?
- Add fontawesome to shadowroot of webcomponent
- Darkening an image when clicked is requiring an initial click on that image, and I don't know why
- Adding margins between Bootstrap columns
- css border: 1px appear as 0.667px or 1px depending on the computer / display resolution (?)
- Button to download file and redirect to new page
- How to insert row with attributes using table.insertRow?
- Pass objects/vars between Page_PreInit and Page_Load