I have to build a form that has radio-type input to the right of the text (text-label) without changing the order of input-tag and label tag.
As the id's for input and label are being set dynamically and maybe due to this reason changing the order is not working instead the radio button is getting vanished. But I am not finding a way to do it.
Below is the code I wrote and the image of the desired outcome.
My code outcome:
Code below (it's a ruby on rails syntax):
<div >
<input type="radio" id="<%=qid%>op1" name="<%=qid%>" value="<%= @questions[qid]["option1"] %>">
<label for="<%=qid%>op1">A. <%= @questions[qid]["option1"] %></label>
</div>
And the desired style I want to give
I also tried writing the input[type"radio"] after the label-tag but it's still not happening.
I also tried applying float:right
css to input[type="radio] but it's not working either.
CodePudding user response:
you need to place the label before input in HTML as
<div style="user-select: auto;">
<label for="Q2op2" style="user-select: auto;">B. Owners</label>
<br style="user-select: auto;">
<input type="radio" id="Q2op2" name="Q2" value="Owners" style="user-select: auto;">
</div>
and add some CSS
.options{
display: flex;
flex-direction: row;
justify-content: space-between;
}
CodePudding user response:
Always place the tags in the order that you want to view them. As you need text to appear first here, place the input tag first and then the radio button. As you need spacing between the two components, make the div container flex and space them evenly.
<div style="user-select: auto;" style="display: flex; justify-content: space-evenly;">
<label for="Q2op2" style="user-select: auto;">B. Owners</label>
<input type="radio" id="Q2op2" name="Q2" value="Owners" style="user-select: auto;">
</div>
CodePudding user response:
- Class
options
would be better as singularoption
, andoption-*
for the children elements of your atom. - You could use
<label>
as the wrapper an therefore no need to usefor
andid
attributes - Don't use inline
style
- Use display
flex
on the label parent - Use
margin-right: auto
on theSPAN
to distance it from theINPUT
element
.option {
display: flex;
border: 1px solid #ddd;
border-radius: 0.3rem;
font-size: 1.2rem;
padding: 1rem;
}
.option-value {
margin-right: auto;
}
<label >
<span >B. Owners</span>
<input type="radio" name="Q2" value="Owners">
</label>
Tip:
when in need to change the markup order visually, use CSS order
(if in a grid or flex context)
.option {
display: flex;
border: 1px solid #ddd;
border-radius: 0.3rem;
font-size: 1.2rem;
padding: 1rem;
}
.option-value {
margin-right: auto;
order: -1;
}
<label >
<input type="radio" name="Q2" value="Owners">
<span >B. Owners</span>
</label>