I need to center these 2 columns of radio's and bring them closer together in the middle.
Can you help?
<table class="layout_table">
<tr>
<td style="width: 25%; text-align: left; padding-right: 25px;">
<fieldset class="icons" style="width: 120px; text-align: center;">
<legend>QS Actions</legend>
<img src="../images/icon_back.gif" border="0" alt="Back to Scenario View"/>
</fieldset>
</td>
<td style="width: 50%;">
<h2>
Quarter Spreads
</h2>
</td>
<td style="width: 25%;; text-align: left; padding-left: 30px;">
<br/>
<table class="legend_table" style="width: 300px;">
<tr>
<td colspan="2" class="shaded">Legend</td>
</tr>
<tr>
<td style="background-color: #ffff99;">Yellow: Modified during the current session</td>
</tr>
<tr>
<td class="critical_text" style="background: #ccccff;">Red MMC QS: Varies from sum of SMC/ELMP F/UF</td>
</tr>
<tr>
<td class="critical_text" style="background: #ffffff;">Red Current Scenario QS: Varies from MMC</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="layout_table">
<tr>
<table style="float: left;">
<strong>Column A:</strong><br>
<input type="radio" name="radioA" value="MWS" />MWS<br>
<input type="radio" name="radioA" value="SMC Unfunded" />SMC/ELMP Unfunded<br>
<input type="radio" name="radioA" value="SMC Funded" />SMC/ELMP Funded<br>
<input type="radio" name="radioA" value="MMC" />MMC<br>
<input type="radio" name="radioA" value="Current Scenario" />Current Scenario
</table>
<table>
<strong>Column B:</strong><br>
<input type="radio" name="radioA" value="MWS" />MWS<br>
<input type="radio" name="radioA" value="SMC Unfunded" />SMC/ELMP Unfunded<br>
<input type="radio" name="radioA" value="SMC Funded" />SMC/ELMP Funded<br>
<input type="radio" name="radioA" value="MMC" />MMC<br>
<input type="radio" name="radioA" value="Current Scenario" />Current Scenario
</table>
</tr>
</table>
<table class="layout_table">
<tr>
<td>
<strong>Column A:</strong><br>
<input type="radio" name="radioA" value="MWS" />MWS<br>
<input type="radio" name="radioA" value="SMC Unfunded" />SMC/ELMP Unfunded<br>
<input type="radio" name="radioA" value="SMC Funded" />SMC/ELMP Funded<br>
<input type="radio" name="radioA" value="MMC" />MMC<br>
<input type="radio" name="radioA" value="Current Scenario" />Current Scenario
</td>
<td>
<strong>Column B:</strong><br>
<input type="radio" name="radioA" value="MWS" />MWS<br>
<input type="radio" name="radioA" value="SMC Unfunded" />SMC/ELMP Unfunded<br>
<input type="radio" name="radioA" value="SMC Funded" />SMC/ELMP Funded<br>
<input type="radio" name="radioA" value="MMC" />MMC<br>
<input type="radio" name="radioA" value="Current Scenario" />Current Scenario
</td>
</tr>
</table>
http://jsfiddle.net/LCmrp/
Related
I need your help. Here is my screenshot.
Screenshot here.
I am having trouble looking for a solution, the case is this. When the user types in the sprinkler duty requirement textbox L/MIN. I should have a code that will search in my table for the nearest value of that label and will show check marks on labels.
Here is my html code for sprinkler duty:
<div class="row g-0" id="chartNine" style="display:none;">
<h4 class="card-title">TOWN'S MAIN FED - SPRINKLER ANNUBAR FLOW TEST</h4>
<table id="dataTable2">
<thead>
<tr>
<th style="width: 750px;">SPRINKLER DUTY REQUIREMENT/S</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label></label>
<input type="text6" class="randomColor" value="0" />
<label> L/MIN # </label>
<input type="text6" value="0" />
<label> KPA </label>
</td>
</tr>
</tbody>
</table>
<button onclick="addTable('dataTable2');">+</button>
<br>
and here is my code for the labels:
<tr>
<td>
<label>
0
</label>
</td>
<td>
<label id="dnValue0" style="display:none;">0.00</label>
<label id="dnValue1" style="display:none;">0.00</label>
<label id="dnValue2" style="display:none;">0.00</label>
<label id="dnValue3" style="display:none;">0.00</label>
<label id="dnValue4" style="display:none;">0.00</label>
<label id="dnValue5" style="display:none;">0.00</label>
<label id="dnValue6" style="display:none;">0.00</label>
</td>
<td>
<input type="text3" value="0" />
</td>
</tr>
<tr>
<td>
<label>
1
</label>
</td>
<td>
<label id="dnValue7" style="display:none;">220.77</label>
<label id="dnValue8" style="display:none;">359.46</label>
<label id="dnValue9" style="display:none;">534.13</label>
<label id="dnValue10" style="display:none;">710.70</label>
<label id="dnValue11" style="display:none;">914.45</label>
<label id="dnValue12" style="display:none;">1385.27</label>
<label id="dnValue13" style="display:none;">2084.30</label>
</td>
<td>
<input type="text3" value="0" />
</td>
</tr>
Thank you, guys!
I am dealing with a really weird error, this is my table:
But if i select something in the first row, and if i want to select something in the second row, then my selection in the first row goes away. so basically i need each row to be a separate radio group. Here is my code:
<table class="table table-bordered table-striped infoTable">
<tbody>
<tr>
<td>Ownership</td>
<td>
<input name="Test" type="radio" value="A" id="Same" />
</td>
<td>
<input name="Test" type="radio" value="B" id="Same1" />
</td>
<td>
<input name="Test" type="radio" value="C" id="Same2"/>
</td>
<td>
<input name="Test" type="radio" value="D" id="Same3"/>
</td>
</tr>
<tr>
<td>Management Control - Board Participation
</td>
<td>
<input name="Test" type="radio" value="A" id="Same4"/>
</td>
<td>
<input name="Test" type="radio" value="B" id="Same5"/>
</td>
<td>
<input name="Test" type="radio" value="C" id="Same6"/>
</td>
<td>
<input name="Test" type="radio" value="D" id="Same7"/>
</td>
</tr>
<tr>
<td>Management Control - Employee Structure
</td>
<td>
<label><input name="Test" type="radio" value="A" /></label>
</td>
<td>
<label><input name="Test" type="radio" value="B" /></label>
</td>
<td>
<label><input name="Test" type="radio" value="C" /></label>
</td>
<td>
<label><input name="Test" type="radio" value="D" /></label>
</td>
</tr>
You have only to change the name of inputs, like that.
<tbody>
<tr>
<td>Ownership</td>
<td>
<input name="Test" type="radio" value="A" id="Same" />
</td>
<td>
<input name="Test" type="radio" value="B" id="Same1" />
</td>
<td>
<input name="Test" type="radio" value="C" id="Same2"/>
</td>
<td>
<input name="Test" type="radio" value="D" id="Same3"/>
</td>
</tr>
<tr>
<td>Management Control - Board Participation
</td>
<td>
<input name="Tes" type="radio" value="A" id="Same4"/>
</td>
<td>
<input name="Tes" type="radio" value="B" id="Same5"/>
</td>
<td>
<input name="Tes" type="radio" value="C" id="Same6"/>
</td>
<td>
<input name="Tes" type="radio" value="D" id="Same7"/>
</td>
</tr>
<tr>
<td>Management Control - Employee Structure
</td>
<td>
<label><input name="Te" type="radio" value="A" /></label>
</td>
<td>
<label><input name="Te" type="radio" value="B" /></label>
</td>
<td>
<label><input name="Te" type="radio" value="C" /></label>
</td>
<td>
<label><input name="Te" type="radio" value="D" /></label>
</td>
</tr>
You have to keep only name different for different set of radio button.
<table class="table table-bordered table-striped infoTable">
<tbody>
<tr>
<td>Ownership</td>
<td>
<input name="Test" type="radio" value="A" id="Same" />
</td>
<td>
<input name="Test" type="radio" value="B" id="Same1" />
</td>
<td>
<input name="Test" type="radio" value="C" id="Same2" />
</td>
<td>
<input name="Test" type="radio" value="D" id="Same3" />
</td>
</tr>
<tr>
<td>Management Control - Board Participation
</td>
<td>
<input name="Test_1" type="radio" value="A" id="Same4" />
</td>
<td>
<input name="Test_1" type="radio" value="B" id="Same5" />
</td>
<td>
<input name="Test_1" type="radio" value="C" id="Same6" />
</td>
<td>
<input name="Test_1" type="radio" value="D" id="Same7" />
</td>
</tr>
<tr>
<td>Management Control - Employee Structure
</td>
<td>
<label><input name="Test_2" type="radio" value="A" /></label>
</td>
<td>
<label><input name="Test_2" type="radio" value="B" /></label>
</td>
<td>
<label><input name="Test_2" type="radio" value="C" /></label>
</td>
<td>
<label><input name="Test_2" type="radio" value="D" /></label>
</td>
</tr>
So I have written the following code and I cannot make same response as I was asked to. the text does not align properly in form. The text isn't like aligned right and feilds on left. I Please suggest a fix as simple as you can.
<form align="center">
<p>Name:
<input type="text">
</p>
<p>Address
<input type="text">
</p>
<p>Email ID:
<input type="text">
</p>
<p>How many Peices of fruit<br>
do you eat per day?
<input type="radio" name="rdbGender" id="rdbGender"> 0
<input type="radio" name="rdbGender" id="rdbGender">1
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2<br>
</p>
<label>Degree:</label>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
<p>Would you like a <br /> brochure?
<input type="checkbox" align="right">
</p>
<input type="submit">
</form>
How it was supposed to look like
How it looks like
I had a hard time understand how you had been writing this code:
<form align="center">
and
<input type="checkbox" align="right"/>
As align is not a valid attribute of an input or form tag.
But what it looks like is that it used, and has long since been removed.
https://www.w3.org/TR/html401/present/graphics.html#adef-align
Note that on my browser (Firefox 81.0) your code doesn't center align like it does in your picture:
So that suggests to me that you are using an old browser.
I recommend using the MDN documentation to see what is elements are supported.
However, if you are supporting outdated then that's a whole discipline in itself.
This page lists all available HTML attributes:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
To give you a useful answer though - judging on the 'supposed to look like' image, it looks like you want to be using a table.
<form>
<table>
<tr>
<td align="right">Name:</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">Address</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right"> Email ID:</td>
<td> <input type="text"></td>
</tr>
<tr>
<td align="right"> How many Peices of fruit do you eat per day?</td>
<td>
<input type="radio" name="rdbGender" id="rdbGender"> 0
<input type="radio" name="rdbGender" id="rdbGender">1
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2 </td>
</tr>
<tr>
<td align="right">
Degree:
</td>
<td>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
</td>
</tr>
<tr align="right">
<td> Would you like a brochure</td>
<td align="left"> <input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td> <input type="submit"></td>
</table>
</form>
Note here, we do use the align attribute. As you can see, according to the MDN documentation, align is supported on a td element, but is deprecated, meaning that it's not advisable to use it.
Do you want like this? Only html:
<form>
<table align="center">
<tr>
<td align="right">Name </td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right"><br>Address </td>
<td><br><input type="text"></td>
</tr>
<tr>
<td align="right"><br>Email ID </td>
<td><br><input type="text"></td>
</tr>
<tr>
<td>
<label for="rdbGender">
<br>
How many Peices of fruit <br> do you eat per day?<br><br><br><br>
</label>
</td>
<td>
<input type="radio" name="rdbGender" id="rdbGender">0<br>
<input type="radio" name="rdbGender" id="rdbGender">1<br>
<input type="radio" name="rdbGender" id="rdbGender">2<br>
<input type="radio" name="rdbGender" id="rdbGender">More than 2
</td>
</tr>
<tr>
<td align="right">
<br>
<label for="degree">
My favourite fruit <br><br><br><br><br>
</label>
</td>
<td>
<select id="degree" multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
</td>
</tr>
<tr align="right">
<td> Would you like a <br>
brochure
</td>
<td align="left"> <input type="checkbox"></td>
</tr>
<tr>
<td></td>
<td>
<br>
<input type="submit">
</td>
</table>
</form>
I suggest you to use CSS Grid to accomplish this job:
form {
display: grid;
grid-template-columns: 150px 200px;
text-align: center;
}
.first-column {
text-align: right;
}
input, select {
margin-left: 5px;
margin-bottom: 5px;
}
.check-area label {
display: block;
text-align: left;
}
.submit-button {
grid-column-start: 2;
text-align: left;
}
<form>
<label class="first-column">Name:</label><input type="text">
<label class="first-column">Address</label><input type="text">
<label class="first-column">Email ID:</label><input type="text">
<div class="first-column">
How many Peices of fruit<br>do you eat per day?
</div>
<div class="check-area">
<label>
<input type="radio" name="rdbGender" id="rdbGender">0
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">1
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">2
</label>
<label>
<input type="radio" name="rdbGender" id="rdbGender">More than 2
</label>
</div>
<label class="first-column">Degree:</label>
<select multiple>
<option selected>apple</option>
<option>banana</option>
<option>plum</option>
<option>pomegranate</option>
</select>
<label class="first-column">Would you like a<br>brochure?</label>
<input type="checkbox" align="right">
<div class="submit-button"><input type="submit"></div>
</form>
I have the following HTML:
<tr>
<td class=tabTwo vAlign=top>
<table border=0 cellPadding=0 cellSpacing=0 width=100%>
<tr>
<td vAlign=top width=5%>4.</td>
<td>Test 1?</td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>a) <input type="radio" name="S1Q4" value="a" id="s1q4a" /> <label for="s1q4a">A</label></td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>b) <input type="radio" name="S1Q4" value="b" id="s1q4b" /> <label for="s1q4b">B</label></td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>c) <input type="radio" name="S1Q4" value="c" id="s1q4c" /> <label for="s1q4c">C</label></td>
</tr>
<tr>
<td width=5%></td>
<td colSpan=2>d) <input type="radio" name="S1Q4" value="d" id="s1q4d" /> <label for="s1q4d">D</label></td>
</tr>
</table>
</td>
</tr>
Produces:
How do I made the radio buttons align in a straight line? B & C seem crooked.
If you are going to use a table. Put the inputs in their own cell. The letter width of a),b) etc. is what is throwing of the alignment.
I would not use a table though. Your choice.
Your question seemed a little vague but to best my knowledge, the presence of bullets a) b) c) in the same cell is causing the problem. Here's my fiddle: http://jsfiddle.net/bTNvA/
I have tried to resolve this by moving bullets to other cell:
<tr>
<td width=5%> a) </td>
<td colSpan=2> <input type="radio" name="S1Q4" value="a" id="s1q4a" /> <label for="s1q4a">A</label></td>
</tr>
HTML
<div class="form-wrapper">
<div class="radio-choice">
<span>a) </span>
<input id="option1" type="radio" name="opt1"/>
<label for="option1">Option 1</label>
</div>
<div class="radio-choice">
<span>b) </span>
<input id="option2" type="radio" name="opt2"/>
<label for="option2">Option 2</label>
</div>
<div class="radio-choice">
<span>c) </span>
<input id="option3" type="radio" name="opt3"/>
<label for="option3">Option 3</label>
</div>
</div>
CSS
.radio-choice * {
vertical-align: middle;
}
.form-wrapper div{
float: left;
clear: both;
}
.form-wrapper span {
display: inline-block;
width: 10px;
}
http://jsfiddle.net/NewwV/1/
I have a 4x4 table of radiobuttons. In the first row (an extra row ABOVE the 4x4) I would like a button centered horizontally. I have tried colspan etc. but all still leave the radiobutton in a column like the others, and thus uncentered.
Obligatory Table-less Answer:
<div>
<div class="center"><input type='button' value='hello' /></div>
<ul class="radioList">
<li>
<label for="radio1">
<input type="radio" id="radio1" />
Checkbox 1</label>
</li>
<li>
<label for="radio2">
<input type="radio" id="radio2" />
Checkbox 2</label>
</li>
<li>
<label for="radio3">
<input type="radio" id="radio3" />
Checkbox 3</label>
</li>
<li>
<label for="radio4">
<input type="radio" id="radio4" />
Checkbox 4</label>
</li>
</ul>
</div>
.center { text-align:center; }
.radioList {
list-style:none;
width:100%;
}
.radioList li {
float:left;
width:25%;
}
http://jsfiddle.net/Amudt/
http://jsfiddle.net/EJbny/
<table style='width:100%;' border=1>
<tr>
<td colspan=4 style='text-align:center;'><input type='button' value='hello'></td>
Like this? Just use CSS and the text-align:center rule on the top row. Here's a jsFiddle example.
<table>
<tr>
<td colspan="4" style="text-align:center"><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
</table>