Why rule in CSS does not work?
index.html - Two radio buttons. Can't correct HTML code, only CSS!
<table class="simplecheckout-methods-table">
<tbody>
<tr>
<td class="code">
<input type="radio" value="pickup.pickup"id="pickup.pickup" checked="checked">
</td>
<td class="title" valign="middle">
<label for="pickup.pickup">pickup</label>
</td>
</tr>
<tr>
<td class="code">
<input type="radio" value="flat1.flat1" id="flat1.flat1">
</td>
<td class="title" valign="middle">
<label for="flat1.flat1">flat1</label>
</td>
</tr>
</tbody>
</table>
style.css - How can I find this label. If label and input in one tr the code work fine. But as I write before I can't correct index.html
.simplecheckout-methods-table input:checked + label {
background: #B099C0;
}
Related
I would like to toggle selection between two different sets of radio buttons.
The condition that must be met is that if the user checks the button on one set (called in the example l1), it is unchecked in the other set (called in the example m1).
In other questions, it seems that it is only feasible solution is using Java scripts.
Below is the code:
<table border="0" cellpadding="1" cellspacing="1" style="width: 500px;">
<tbody>
<tr>
<td style="width: 300px;"> </td>
<td style="width: 100px; text-align: center;">Least</td>
<td style="width: 100px; text-align: center;">Most</td>
</tr>
<tr>
<td>{{question1}}</td>
<td style="text-align: center;"><input name="l1" type="radio" value="-1" /></td>
<td style="text-align: center;"><input name="m1" type="radio" value="1" /></td>
</tr>
<tr>
<td>{{question2}}</td>
<td style="text-align: center;"><input name="l1" type="radio" value="-2" /></td>
<td style="text-align: center;"><input name="m1" type="radio" value="2" /></td>
</tr>
<tr>
<td>{{question3}}</td>
<td style="text-align: center;"><input name="l1" type="radio" value="-3" /></td>
<td style="text-align: center;"><input name="m1" type="radio" value="3" /></td>
</tr>
<tr>
<td>{{question4}}</td>
<td style="text-align: center;"><input name="l1" type="radio" value="-4" /></td>
<td style="text-align: center;"><input name="m1" type="radio" value="4" /></td>
</tr>
</tbody>
Thank you for taking the time to read/answer this.
First thing: my career page has a pre-made contact form that i turned into a job application. I have two layout questions:
1.) How do i get the 'checkbox' buttons to line up a little closer to each other. I tried td colspan="2" which is the case later in the form for 2 buttons (submit/reset 1 which i removed), but to no avail, "No" appears well to the right of "Yes." I'd like to have it relatively closer to "Yes."
2.) When you pull the drop down for "Experience" down, it forces the image below the form. Once you select your option, the image goes back to its place. Do i absolutely have to absolute position the graphic? Or can i add an overflow maybe to the dropdown? I can't figure it out.
FancyForm is the form i'm using.
Here is the HTML:
<form id="contact-form" name="contact-form" method="post" action="submit.php">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="15%"><label for="name">Name</label></td>
<td width="70%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="address">Address</label></td>
<td width="70%"><input type="text" class="validate[required,custom[a-zA-Z\d\s\-\,\#\.\+]+]" name="address" id="address" value="<?=$_SESSION['post']['address']?>" /></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="telephone">Telephone</label></td>
<td width="70%"><input type="text" class="validate[required,custom[onlyNumber]]" name="telephone" id="telephone" value="<?=$_SESSION['post']['telephone']?>" /></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="email">Email</label></td>
<td width="70%"><input type="text" class="validate[required,custom[email]]" name="email" id="email" value="<?=$_SESSION['post']['email']?>" /></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="citizenship">US Citizen</label></td>
<td width="35%"><input type="checkbox" name="citizen" value="yes">Yes</td>
<td width="35%"><input type="checkbox" name="citizen" value="no">No</td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="age">At Least 18</label></td>
<td width="35%"><input type="checkbox" name="age" value="yes">Yes</td>
<td width="35%"><input type="checkbox" name="age" value="no">No</td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="previousexp">Have you worked<br> with us before?</label></td>
<td width="35%"><input type="checkbox" name="previousexp" value="yes">Yes
<td width="35%"><input type="checkbox" name="previousexp" value="no">No</td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="subject">Experience</label></td>
<td width="70%"><select name="subject" id="subject">
<option value="" selected="selected"> - Choose -</option>
<option value="0-5">0-5 Years</option>
<option value="6-10">6-10 Years</option>
<option value="11-15">11-15 Years</option>
<option value="16-20">16-20 Years</option>
</select></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td><label for="captcha"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label></td>
<td><input type="text" class="validate[required,custom[onlyNumber]]" name="captcha" id="captcha" /></td>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top"> </td>
<td colspan="2"><input type="submit" name="button" id="button" value="Submit" />
<?=$str?> <img id="loading" src="img/ajax-load.gif" width="16" height="16" alt="loading" /></td>
</tr>
</table>
</form>
CSS:
#form-container{
padding:0px;
}
td{
white-space:nowrap;
}
h1{
color:#777777;
font-size:22px;
font-weight:normal;
text-transform:uppercase;
margin-bottom:5px;
}
h2{
font-weight:normal;
font-size:10px;
text-transform:uppercase;
color:#aaaaaa;
margin-bottom:15px;
border-bottom:1px solid #484848;
margin-bottom:15px;
}
label{
text-transform:uppercase;
font-size:10px;
font-family:Tahoma,Arial,Sans-serif;
}
textarea{
color:#404040;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
td > button{
text-indent:8px;
}
Don't specify static percentile widths on the check boxes in question.
Use the:
margin-left:15px;
/* & */
margin-right:15px;
CSS properties on the checkboxes... To do this I would recommend giving the checkboxes a class of:
class="chk-close"
...or something meaningful... then use the class declaration, declared with a '.' (period / full stop) adding the new CSS declaration into your external CSS file.
aka:
.chk-close
{
margin: 0px -15px 0px -15px;
/* Will do all top, right, bottom, left... margin amounts */
}
Please comment on this if you would like any further support!
My requirement is I want to align my radio button to left in table cell, but it is not happening with the below code:
My code
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h3>Action</h3>
<table class="tabledata" width="100%">
<tr>
<td class="td1">
<p>
<input id="Radio1" type="radio" value="Approve" /></p>
</td>
<td class="td2">Approve</td>
</tr>
<tr>
<td>
<input id="Radio2" type="radio" /></td>
<td class="td2">Reject</td>
</tr>
<tr>
<td>
<input id="Radio3" type="radio" />
</td>
<td class="td2">Send Back to Requestor</td>
</tr>
<tr>
<td>Amount Approved for Domestic sector : </td>
<td>
<input id="Text1" type="text" /></td>
</tr>
<tr>
<td>Remarks : </td>
<td>
<input id="Text2" type="text" /></td>
</tr>
<tr>
<td class="tabledata">
<input id="Button1" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
My CSS classes:
.td1 {
vertical-align:middle;
text-align:right;
}
.td2 {
text-align: left;
}
Actually I want to keep my radio button and its corresponding text in a table row by combining 2 columns and centre aligned and also submit button shoud be centre aligned in a table row since I am using jquery mobile datarole I guess it is not happening.Please help me to get the look.
After adding the script in head also I am getting below output:
Remove ui-radio class from each radio button.
$('[type=radio]').each(function () {
$(this).closest('div').removeClass('ui-radio');
});
and add class td1 to each radio button.
<tr>
<td class="td1">
<input id="Radio1" type="radio" value="Approve" />
</td>
<td class="td2">Approve</td>
</tr>
<tr>
<td class="td1">
<input id="Radio2" type="radio" />
</td>
<td class="td2">Reject</td>
</tr>
<tr>
<td class="td1">
<input id="Radio3" type="radio" />
</td>
<td class="td2">Send Back to Requestor</td>
</tr>
Demo
Alternative method: No jQuery code is required nor custom CSS styles. Read more about it here.
Why don't you use styled radio buttons, as in the below demo.
Alternative
new CSS:
tr td:nth-child(1) {
vertical-align:middle;
text-align:right;
}
http://jsfiddle.net/yHbdn/1/
I am trying to have my form in a table but it generates a table and makes it a mess.
the generated table is as following:
<div>
<s:form action="myaction" >
<table border="1">
<tr>
<td><s:textfield name="name" label="Name" /></td>
<td><s:textfield name="family" label="Family" /></td>
<td><s:submit/></td>
</tr>
</table>
</s:form>
</div>
Source code :
<div>
<form id="myaction" name="myaction" action="/application/myaction.action" method="post">
<table class="wwFormTable"> <<<generated table
<table border="1">
<tr>
<td><tr>
<td class="tdLabel"><label for="Search_Name" class="label">Name:</label></td>
<td
><input type="text" name="Name" value="" id="Search_Name"/></td>
</tr>
</td>
<td><tr>
<td class="tdLabel"><label for="Search_Family" class="label">Family:</label></td>
<td
><input type="text" name="Family" value="" id="Search_Family"/></td>
</tr>
</td>
<td><tr>
<td colspan="2"><div align="right"><input type="submit" id="Search_0" value="Submit"/>
</div></td>
</tr>
</td>
</tr>
</table>
</table></form>
Use the "simple" theme if you do not want to use S2's default "xhtml" theme.
You'll lose S2's automatic error reporting. You may wish to consider creating your own theme.
Alternatively, you can use the "simple" theme on individual controls.
See the "Themes and templates" docs to get started.
Try to use any theme in struts form tag
eg:
<s:form action="Courses" theme="css_xhtml">
<table border="0">
<tr>
<td><s:textfield name="courseAbbr" /></td>
</tr>
</table>
</s:form>
May Be you should use this code instead...
<sp:form >
<tr>
<td>
<table>
<sp:textfield name="name"></sp:textfield>
</table>
</td>
<td>
<table>
<sp:textfield name="family"></sp:textfield>
</table>
</td>
<td>
<table>
<sp:submit/>
</table>
</td>
</tr>
</sp:form>
My engine is Aspx.
I am currently having trouble editing one of my columns(Question Answer) in my table because it has html tags in it. Is there a way I can decode only that specific row/column in the value area?
<form id="updateFreqQuestionsUser" action="<%=Url.Action("SaveFreqQuestionsUser","Prod")%>" method="post">
<table>
<tr>
<td colspan="3" class="tableHeader">Freq Questions User Details <input type ="hidden" value="<%=freqQuestionsUser.freqQuestionsUserId%>" name="freqQuestionsUserId"/> </td>
</tr>
<tr>
<td colspan="2" class="label">Question Description:</td>
<td class="content">
<input type="text" maxlength="2000" name="QuestionDescription" value="<%=freqQuestionsUser.questionDescription%>" />
</td>
</tr>
<tr>
<td colspan="2" class="label">QuestionAnswer:</td>
<td class="content">
<input type="text" maxlength="2000" name="QuestionAnswer" value="<%=freqQuestionsUser.questionAnswer%>" />
</td>
</tr>
<tr>
<td colspan="3" class="tableFooter">
<br />
<a id="freqQuestionsUserUpdateButton" href="#" class="regularButton">Save</a>
Cancel
</td>
</tr>
</table>
Yes, you can do this:
<input type="text" maxlength="2000" name="QuestionAnswer"
value="<%=Server.HtmlDecode(freqQuestionsUser.questionAnswer)%>" />
Reference