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!
Related
I'm trying to create an excel spreadsheet with a landing page where I input a specific week number, period number and/or year.
I would then click a button to open an instance of Internet Explorer, navigate to the web form, input the data from the cells in the spreadsheet and then load up the reports selected.
Code for the web form
<br>
<body>
</body>
</html>
<head>
<!--include file="../../Connections/SQL.asp" -->
<title>Performance Reporting</title>
<link href="../../CSS/KPI_Style.css" rel="stylesheet" type="text/css">
<link href="../../CSS/KPI_Style.css" rel="stylesheet" type="text/css">
<link href="../CSS/KPI_Style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style45 {color: #990000}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
function makeDisable(){
var y=document.getElementById("store")
var x=document.getElementById("CHNSplits")
if (y.value=='CP11')
{
x.disabled=true
}
}
function makeEnable(){
var x=document.getElementById("CHNSplits")
x.disabled=false
}
-->
</script>
</head>
<body>
<div align="center">
<link href="../CSS/PL_Style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {font-size: 16px}
.style33 {color: #ffffff}
-->
</style>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#001446" class="border9"><div align="left"><img src="80.gif" alt="DSGi" /></div></td>
<td valign="bottom" bgcolor="#001446" class="border16"><div align="right" class="xbig style1 style33"><span class="style2">Store Performance</span> </div></td>
</tr>
</table>
<br>
<br>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: url();
}
.style1 {
color: #d33;
font-size: 18px;
}
.style2 {color: #000000; font-size: 2px; }
.style10 {color: #d33}
.style15 {font-size: 12px}
-->
</style>
<title></title>
</div>
<link href="../../../Testing/KPI/NewKPI/Digital_KPI/stylesheet.css" rel="stylesheet" type="text/css">
<div align="center"><span class="reportname"> Reporting Selection</span></div>
<form name="form1" id="form1" method="post" action="Get_Page_V4.asp">
<input name="store" type="hidden" value="2397" >
<input name="ViewType" type="hidden" value="store" >
<table width="60%" border="1px" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
<td colspan="2"><div align="center" class="formnamesmall">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="4">
<td></td>
</tr>
<tr height="5">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6"><div align="center" class="formtextverylarge">Selected Location:</span> 1111</div></td>
</tr>
<tr>
<td><input name="RadioGroup1" type="radio" value="1" checked></td>
<td class="formnamesmall" ><strong>Yesterday</td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr class="formtext">
<td><input type="radio" name="RadioGroup1" value="2"></td>
<td class="formnamesmall" ></td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall"> </td>
<td class="formtext">
<input name="datebox" type="hidden" id="datebox" value="07/10/2018" size="10" maxlength="10"></td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr>
<td><input type="radio" name="RadioGroup1" value="3"></td>
<td class="formnamesmall" ><strong>Week</td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Week </td>
<td class="formtext">
<input name="week" type="text" id="week" value="24" size="2" maxlength="2"></td>
</tr>
<tr>
<td> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Financial Year </td>
<td class="formtext">
<input name="weekyear" type="text" id="weekyear" value="2019" size="4" maxlength="4"></td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr class="formtext">
<td><label>
<input type="radio" name="RadioGroup1" value="4">
</label></td>
<td class="formnamesmall" ><strong>Period</td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Period </td>
<td class="formtext">
<input name="period" type="text" id="period" value="6" size="2" maxlength="2"></td>
</tr>
<tr class="formtext">
<td> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Financial Year </td>
<td class="formtext">
<input name="periodyear" type="text" id="periodyear" value="2019" size="4" maxlength="4"></td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr height="15">
<td height="10"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
<td height="10" class="formtext"></td>
</tr>
<tr class="formtext">
<td><input type="radio" name="RadioGroup1" value="6"></td>
<td class="formnamesmall" ><strong>Year </td>
<td class="formtext"> </td>
<td class="formtext"> </td>
<td class="formnamesmall">Enter Financial Year </td>
<td class="formtext">
<input name="YearYear" type="text" id="YearYear" size="4" maxlength="4" value="2019" ></td>
</tr>
<tr><td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
</tr>
<!--
<tr>
<td colspan="4"><div align="center"><span class="formnamesmall style45">Select Report Type</span></div></td>
<td> </td>
<td colspan="2" class="formname" ><strong></td>
</tr>
-->
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<td height="10"> </td>
<tr>
<!--
<td><div align="center">
<input name="RadioGroup2" type="radio" class="Style10" value="1" >
</div></td>
<td>
<div align="right" class="formnamesmall style45">
<div align="left">Charts </div>
</div></td>
-->
<input name="RadioGroup2" type="hidden" class="Style10" value="6" checked="Checked">
<!--
<td><div align="right" class="formnamesmall">
<div align="left" class="style45">League Tables
</div>
</div></td>
-->
<td class="formnamesmall" colspan="4"> </td>
<td><input type="submit" name="Submit" value="Display Report"></td>
</tr>
</table>
<p> </p>
</div></td>
</tr>
</table>
<input name="page_name" type="hidden" value="Region_Page1_" />
</form>
<br>
<br>
<style type="text/css">
<!--
.style1 {
font-size: 10px;
color: #FFFFFF;
}
-->
</style>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="bottom" bgcolor="#001446"><div align="right" class="xbig style1 style1"> </div></td>
</tr>
</table>
</body>
VBA code
Sub Get_Data()
Dim i As Long
Dim IE As Object
Dim objElement As Object
Dim objCollection As Object
Dim HWNDSrc As Long
Dim dates As Object
Set IE = CreateObject("InternetExplorer.Application")
With IE
.Visible = True
.navigate "http://INTRANETSITE/Summary_Select.asp"
Do Until .readyState = 4 And Not .Busy
DoEvents
Loop
.document.all.Item("radioGroup1")(3).Checked = True 'Select the 4th checkbox down on the list
.document.forms(0).submit 'Submit the form to generate the result
End With
Pause (2)
With IE
.navigate "http://INTRANETSITE/ReportDetail2.asp?"
Do Until .readyState = 4 And Not .Busy
DoEvents
Loop
End With
End Sub
The code above navigates to the web form and does select the 4th radio button which is for period reports, then submits the form and displays the first page.
How do I interact with the text boxes to also amend which week or period I want to select reports for?
Also, when it tries to navigate to ReportDetail2.asp it returns the following error and then crashes the VBA code.
Method 'Navigate' of object 'IWebBrowser2' failed
The long term goal of this is to navigate through 20+ pages of reports, pulling the data from each table into a tab on the spreadsheet, so if it can't navigate between the reports, even before we get to the code to pull the data, then that's a problem.
Try something like the following. I am showing the different options you might consider so remember to comment out those you don't want to use.
You need to add a reference to Microsoft Internet Controls via VBE > Tools > References or use late bound call of
Dim ie As New InternetExplorer : Set ie = CreateObject("InternetExplorer.Application")
VBA:
Option Explicit
Public Sub MakeSelections()
Dim ie As New InternetExplorer
Const URL As String = "yourURL"
With ie
.Visible = True
.navigate URL
While .Busy Or .readyState < 4: DoEvents: Wend
With .document
.querySelector("[value='1']").Checked = True 'Yesterday. CSS attribute = value selector
.querySelector("[value='3']").Checked = True 'Week
.querySelector("[value='4']").Checked = True 'Period
.querySelector("[value='6']").Checked = True 'Year
.getElementById("week").Value = 6 'week value
.getElementById("weekyear").Value = 2018 'financial year value
.getElementById("period").Value = 6 'period value
.getElementById("periodyear").Value = 2018 'period financial year value
.getElementById("yearyear").Value = 2019 'financial year value
.querySelector("[value='Display Report']").Click 'display report
End With
Stop '<== Delete me later
'.Quit '<== Remember to quit application
End With
End Sub
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;
}
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>
I have table inside div , thing is if I change window size, table is coming out of div. please help me. Thanks in advance. Below is my code
<div style="height:auto">
<table width="100%" style="width: 100%;">
<thead>
<tr >
<th width="16.5%">sunday</th>
<th width="16.5%">monday</th>
<th width="16.5%">tuesday</th>
<th width="16.5%">wed</th>
<th width="16.5%">thu</th>
<th width="16.5%">fri</th>
</tr>
</thead>
<tbody>
<tr >
<td>111</td>
<td ><input value="" type="" name="" /></td>
<td ><input value="" type="" name="" /></td>
<td ><input value="" type="" name="" /></td>
<td ><input value="" type="" name="" /></td>
<td ><input value="" type="" name="" /></td>
</tr>
</tbody>
</table>
</div>
Add following css in you code
div{
width: 500px; /* you can apply any width to this div */
}
table{
table-layout:fixed;
border-spacing: 0;
border-collapse: separate;
}
table td{
padding: 5px;
}
input{
width: 100%;
box-sizing: border-box;
}
Check this Demo
Add this in CSS:
td input {
width: 90%;
margin: 0 auto;
}
You have to specify the text field size as a percentage
remove table header fixed width.
CSS
input{width:100%;}
HTML
<div style="background-color:#ccc;padding:5px">
<table >
<thead>
<tr >
<th >sunday</th>
<th >monday</th>
<th >tuesday</th>
<th >wed</th>
<th >thu</th>
<th>fri</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td ><input value="" type="text" name="" /></td>
<td ><input value="" type="text" name="" /></td>
<td ><input value="" type="text" name="" /></td>
<td ><input value="" type="text" name="" /></td>
<td ><input value="" type="text" name="" /></td>
</tr>
</tbody>
</table>
</div>
Working fiddle http://jsfiddle.net/G5y3T/1/
You should set your div style to display:inline-block;
Here you can see a demo
You should also use an extern css file rather then inline style. Much efficienter when you change something.
If you want the div to contain the table,you can use overflow: auto. This makes the div scrollable.
But if you don't want it to be scrollable, use display: table instead.
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/