got a question on radio buttons. Got a html code and css code below but what is happening is that I have 2 radio buttons and each radio button has a text next to it. The first radio button states "Male"and the other radio button states "Female".
Now "Male" is display next to the radio button which is fine, but "Female" is displayed below the radio button. If I make the table where the whole radio buttons and text are stored wider, then both "Male" and "Female" are displayed under their radio buttons and not next to them.
So my question is what needs to be changed in my css/html code in order to display "Male" and "Female" next to their radio buttons?
Below is the html code:
<table id="replies">
<tr>
<th colspan="2">
Replies
</th>
</tr>
<tr>
<td>Gender: </td>
<td align="left">
<div class="replytd">
<input type="radio" name="reply" value="male" class="replyBtn" /><span class="replyspan">Male</span>
</div>
<div class="replytd">
<input type="radio" name="reply" value="female" class="replyBtn" /><span class="replyspan">Female</span>
</div>
</td>
</tr>
</table>
below is the css code:
#replies{
display:inline-block;
vertical-align:top;
min-width:15%;
max-width:15%;
}
#replies th{
border-collapse:collapse;
border:1px solid black;
}
#replies td{
border-collapse:collapse;
border:1px solid black;
padding:1%;
}
I would use the <label> tag instead of the <span> tag, because they have a better accessibility and correlation to the <input> element.
you can add this in your css code to change display mode about "div"
.replytd
{
float:left;
}
white-space:nowrap helps but could be a slight overkill, given that simply setting a column width would work
That being sad, a more correct approach would be using a <label> element which gets correctly recognized by screen-readers etc. and serves its semantic purpose. Label elements can be implicitly (without a for attribute) linked with inputs when being their parent, like
<label><input type="radio" name="reply" value="male" class="replyBtn" />Male</label>
You set max-width:15%; which is not enough to accommodate the content so the content starts to wrap. Increase or remove max-width.
Related
I am trying to hide checkbox, but still allow it to check when a div / button is pressed.
My code for the custom buttons are
<div class="checkbox flex item center-text bg-theme"
style="border: 1px solid #e3e3e3;border-radius: 12px;">
<i class="twf twf-round-pushpin"></i>
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" >
I've tried adding visibility:none and display:none; but this just doesn't work, when i click the buttons, nothing happens.
You might try to add opacity:0; in the css.
If you do not want the box to be directly checkable, use pointer-events:none in addition to that
Add display:inline-block on the first div so it will take only the minimum place and won't leave a big blank.
Then for the checkbox, using display:none works fine, I've added an onclick callback to log the state of the checkbox on each click on the label.
Try this sample:
<div class="checkbox flex item center-text bg-theme" style="border: 1px solid #e3e3e3;border-radius: 12px; display:inline-block;">
<i class="twf twf-round-pushpin"></i>
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" style="display: none;" onclick="console.log(this.checked)">
</div>
I read from this question: Can the label tags for attribute be associated with a normal div? that is not possible to give a div the attribute for to be associated to the id in the input.
Normally if I give a for to label and id to input the radio button is automatically selected whenever the user clicks the text in the label.
Let's say I create a form with many radio buttons and each one of them are in a span or a div so I can dive a border that wraps both label and radio button, let's also say I give a 20px padding all directions, how can I make clickable the all area within the border so it autotomatically selects the radio button associated to the div?
I wrote this below but just found out div doesn't recognize for attribute:
HTML
<div class="radio-btn" for="rdBanana"><input type="radio" name="fruit" value="banana" id="rdBanana"><label>Banana</label></div>
<div class="radio-btn" for="rdOrange"><input type="radio" name="fruit" value="orange" id="rdOrange"><label>Orange</label></div>
<div class="radio-btn" for="rdKiwi"><input type="radio" name="fruit" value="kiwi" id="rdKiwi"><label>Kiwi</label></div>
CSS
.radio-btn {
display: inline-block;
border: 1px solid black;
padding: 20px;
}
How can i make all the padding clickable to automatically select radio button?
Place the button inside the <label>.
Instead of <input type="radio"><label>Banana</label>, use <label><input type="radio">Banana</label>.
Everything inside <label> will become clickable and toggle the button.
span{
text-align: justify;
}
<input type="checkbox" name="type"><span>Excessive Reinforcement</span><br>
I want to align the label for excessive reinforcement checkbox like image2
For example
Thanks in advance
First of all use <label> instead of <span>.
If we use bootstrap we generally manage this with classes but here if we talk about custom css this can be a solution.
label{
text-align: justify;
float: left;
line-height: 20px;
}
input{
float:left;
}
<input type="checkbox" id="check" name="type"><label for="check">Excessive<br>Reinforcement</label><br>
Above i added id in checkbox and for in label so that checkbox will be selected on click of label also.
If you can change the HTML
The best and new method to use checkbox is
<label><input type="checkbox" name="type">Excessive Reinforcement</label>
span {
text-align: justify;
}
.make-table {
display: table-cell;
/* make it behave like table-cell. so that they fall beside each other. */
}
<div class="any-class">
<label><span class="make-table"><input type="checkbox" name="type"></span>
<span class="make-table">Excessive<br> Reinforcement</span>
</label>
</div>
<hr>
<div style="color:red">Wrap it inside any-class and align as you want.
<br>I added LABEL tag, so that, even if your user clicks on the text, the checkbox will work.</div>
Make this simple change!
This is one way of doing it:
<label for="type-1">
<input id="type=1" type="checkbox" name="type"> Excessive Reinforcement
</label><br>
When using input elements, you should always provide a label with the for attribute assigned the id of the input element. And also make sure the input element ids are unique.
((I'm a beginner so this probably has a simple solution, but I've searched with all the keywords I can think of and can't find what I'm looking for. I appreciate any help — clearly I am in over my head.))
I'm trying to give the first radio button within a paragraph a different margin than the rest of the radio buttons. This is what I have:
p.question:first-child input[type=radio] {
margin: 5px;
}
<p class="question">
<input type="radio" name="sample1" /> Yes
<input type="radio" name="sample1" /> No
<input type="radio" name="sample1" /> Maybe-So
</p>
Shouldn't this target the first radio button within a paragraph? Please be gentle.
You're putting the first-child on the <p>, not the radio button.
Try this.
p.question input[type=radio]:first-child {
margin: 5px;
}
Here's a jsfiddle.
Here is my code:
<p align="center">Do you want to play the game?</p><br>
<Input type = 'Submit' Name ='StartQuiz' value="Yes" align="center">
<Input type = 'Submit' Name ='LogOut' value="No" align="center">
The buttons are not in the center. Do I have to use CSS for this? I read on the net to just use the simple align tag.
How should I go about aligning these buttons to the center?
Align is deprecated on HTML5, so considered use CSS3 instead. The align attributte is to center the content and not the element itself.
The input element is inline-block by default, so, to center you need to put them inside a div as here:
<div style="text-align:center;">
<input type="text" />
</div>
This is cause the inline-block elements share the same line with other elements and you need to center all elements that share the same line. The div element is a block element that display alone in one line.
So you have another option to center an input, and you can set to "display:block;" as here:
<input type="text" style="margin:0px auto; display:block;" />
See: http://jsfiddle.net/T4f3W/
You should be using CSS for such styling. Rid of the HTML align attributes, add a wrapper, and center the text. Also note that the <center> tag and certain uses of align=center are deprecated as of HTML5.
<div>
<p>Do you want to play the game?</p><br>
<input type="submit" name="StartQuiz" value="Yes">
<input type="submit" name="LogOut" value="No">
</div>
And for your CSS:
div
{
text-align: center;
}
<p align="center">Do you want to play the game?</p><br>
<div style="text-align: center">
<Input type = 'Submit' Name ='StartQuiz' value="Yes" align="center">
<Input type = 'Submit' Name ='LogOut' value="No" align="center">
</div>
Define one div parent and give to text-align center in your css .
Hi Check to live demo http://jsfiddle.net/vdUEZ/
Remove p tag align center and give to one div
Updated Live demo http://jsfiddle.net/vdUEZ/1/
chuck the inputs inside a <center> tag. check out the live demo http://jsfiddle.net/xA2kS/
Your strategy should work if you move the <input> tags inside the the <p> tag and remove the deprecated align attributes in the <input> tags. Even if you were to use the align attribute in an <input> tag, the correct value would be "middle", not "center". Try this code:
<p align="center">Do you want to play the game?<br>
<Input type = 'Submit' Name ='StartQuiz' value="Yes">
<Input type = 'Submit' Name ='LogOut' value="No">
</p>
It's also possible (preferred, actually) to use CSS for centering.