Okay so this is probably a fairly easy solution but I can't seem to find any answers anywhere else, I want my submit button on the far right column (Accept/Decline), but when I try and position it somewhere else it wont do it...
The CSS:
#table2 {
text-align: center;
margin-left:auto;
margin-right:auto;
overflow-y: auto;
height: 150px;
width:680px;
}
The Table: (I've removed a lot of code when I put it on here, if you want anymore of my code, please ask)
`
Employee name
Holiday Start Date
Holiday End Date
No. Days
Reason
Accept/Decline
<tr>
<td><%response.Write(objDBRS(0))%></td>
<td><%response.Write(formatdatetime(objDBRS(1)))%></td>
<td><%response.Write(formatdatetime(objDBRS(2)))%></td>
<td><%response.Write((objDBRS(3)))%></td>
<td><%response.Write((objDBRS(5)))%></td>
<td>
<input type="radio" name="radio<%=a%>" />
<input type="radio" name="radio<%=a%>" />
</td>
</tr>
<tr>
<td><input type="submit" id="send" name="send" value="Submit"></td>
</tr>
</table>
`
It is automaticaly placed on the left html:
<tr>
<td colspan="6"><input type="submit" id="send" name="send" value="Submit"></td>
</tr>
Give it a colspan 6 then you can move it to the right by using float in CSS or position with CSS
Related
I want to make the three buttons span the entire page equally, does anybody know how?
<div class="mainNavigation">
<table>
<tr>
<td>
<form action="webPages/index.html">
<input type="submit" value="Purchase Used Cubes" />
</form>
</td>
<td>
<form action="webPages/index.html">
<input type="submit" value="Purchase Cube Products" />
</form>
</td>
<td>
<form action="webPages/index.html">
<input type="submit" value="Purchase Cube Repairs" />
</form>
</td>
</tr>
</table>
</div>
Here is the image of what the page looks like:
Set the width of table and input to 100%. A bit of explanation, setting the width of table to 100% makes it span across the page giving the input children of it equal width of (100/3)% (3 input elements) of the page width. Now setting the input width to 100% makes it span across the available space for it, which is (100/3)% of the page width.
table,
input {
width: 100%;
}
<div class="mainNavigation">
<table>
<tr>
<td>
<form action="webPages/index.html">
<input type="submit" value="Purchase Used Cubes" />
</form>
</td>
<td>
<form action="webPages/index.html">
<input type="submit" value="Purchase Cube Products" />
</form>
</td>
<td>
<form action="webPages/index.html">
<input type="submit" value="Purchase Cube Repairs" />
</form>
</td>
</tr>
</table>
</div>
Link to codepen: https://codepen.io/geekyquentin/pen/WNMEwQr
Try using this snippet it will do the job:
table,
input {
width: 100%;
}
But I suggest you use something like CSS grid, or flexbox for a better layout unless you have an engineering requirement.
If you want I can give you a good solution to it
I need to align the labels on the left hand side properly, so that the textbox and text area at the same place..I have added a class to set the width but that does not work properly.
FIDDLE
Code:
<div id="feedbackdialogbox">
<div>
<h3>Feedback</h3>
</div>
<ul>
<li>
<label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label>
<input type="text" id="feedback_name">
<br>
</li>
<li>
<label for="feedback_msg" class="feedback-label-len">How can we do better?</label>
<textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea>
<br>
</li>
<li>
<div id="radio_button_list_title_wrapper">
<div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
</div>
<br>
</li>
</ul>
<button id="feedback_submit">Send</button>
</div>
css
.feedback-label-len {
width:600px;
}
I think if I were in your place, I'd just add two </br> below the labels.
They are:
On the left hand side
They are left-aligned as well.
This obviously shall give you the same effect as
label {display:block;}
Adding display: block to the labels would be a fine solution for a simple form. If you're set on putting them side by side...
label {display: block; float: left}
li {overflow: hidden
.feedback-label-len {
display: block;
}
JSFIDDLE
I would use a table.
JSFIDDLE
<form method="post" action="feedback.php">
<table id="feedbackTable">
<tr>
<th><label for="txtName">(Optional) tell us who you are</label></th>
<td><input type="text" id="txtName" style="color:#000000" title="Enter your name" name="txtName" placeholder="Enter Your Name" /></td>
</tr>
<tr>
<th class="message"><label for="">How can we do better?</label></th>
<td><textarea title="Enter your message" name="txtMessage" rows="5" id="txtMessage" placeholder="Go ahead, type your feedback her..."></textarea></td>
</tr>
<tr>
<th><label for="txtEmail">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</label></th>
<td><input type="text" id="txtEmail" title="Enter your email address" name="txtEmail" value=""/></td>
</tr>
<tr>
<th><label title="Send"></label></th>
<td><input type="submit" style="color:#000000" value="Send" /></td>
</tr>
</table>
</form>
One approach you can try using is using tables in order to format the data. Using the table, tr (table row), and td (table data) html tags we can format the data in so that they are spaced correctly without using CSS!!!
<DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="feedbackdialogbox">
<div>
<h3>Feedback</h3>
</div>
<table>
<ul>
<tr>
<td>
<li><label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label></li></td>
<td><input type="text" id="feedback_name"></td>
</tr>
<tr>
<td><li><label for="feedback_msg" class="feedback-label-len">How can we do better?</label></li></td>
<td><textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea></td>
</li></tr>
<li>
<div id="radio_button_list_title_wrapper">
<div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
</div>
<br>
</li>
</ul>
</table>
<button id="feedback_submit">Send</button>
</div>
</body>
</html>
Just so you know this method may upset html purists. The tag was designed to actually display table data and using it for other purposes such as formatting is sometimes considered improper by old school web coders. However it I have not been able to find an actual problem caused by formatting data like this and doing so is the easiest way for you to make pages such as the one you are asking about.
I hope this answered your question, if you need me to expand on this just ask but when I ran the code above it gave me something much like you described.
I have a problem with aligning my labels and input fields in a form. Time and again I end up with something like this:
Which is produced with HTML like so:
...
<ul>
<li>
<label for="STREET">Street</label>
<input data-val="true" data-val-required="The Street field is required." id="STREET" name="STREET" type="text" value="P.O. Box 1053" />
</li>
<li>
<label for="SUITE">Suite</label>
<input id="SUITE" name="SUITE" type="text" value="" />
</li>
<li>
<label for="city">City</label>
<input data-val="true" data-val-required="The City field is required." id="city" name="city" type="text" value="Dalton" />
</li>
...
Naturally my issue is that the labels and the inputs don't line up, so the display is all jaggy, etc. I can personally think of many ways around this, using a table, setting a bunch of divs, and picking widths, etc. so that everything lines up properly.
It's not that these approaches don't work, but they don't seem to be more of a hack than a real solution, and then I end up having to manipulate the label widths if the label text / font changes, etc.
Is there an easier way to solve this type of problem, while preserving simple HTML / CSS or should I stick with the classic approach of hard coding widths, divs, using tables, etc ?
Here's an option
ul {
display: table;
}
li {
display: table-row;
}
label, input {
display: table-cell;
}
Of course you should adapt the css to your specific form, but this gives you table layout without sacrificing the markup. Here's a fiddle
it should be enough to set a width to the labels that is larger than the largest label-text
example css
label {
display:inline-block;
width:350px;
}
so all inputs would line up after 350px, is that your desired effect ?
http://jsfiddle.net/dKjpk/5/
Here is an option using floating inside the label if it's possible to give ul a fixed / relative width:
ul{
width:500px; // or 100%;
}
li{
width:100%;
display:block;
}
li{
list-style:none;
clear:both;
}
li label{
float:left;
}
li input{
float:right;
}
here's a fiddle
Arguably you could justify using a table here, since semantically you can consider that form to be tabular data.
Otherwise you need to either float the input elements right within their container so they are all flush, set a fixed width on the label elements, or use some kind of fluid grid to handle this (I usually use Foundation so I would use columns for this, with both label and input elements set to width: 100% within their fluid containers).
try it like this
by creating a table your things are in the same area beneath each other
<html>
<head>
<style>
label{
font-weight:bold;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td><label for="street">Street</label></td>
<td><input type="text" name="street"></td>
</tr>
<tr>
<td><label for="suite">Suite</label></td>
<td><input type="text" name="suite"></td>
</tr>
<tr>
<td><label for="city">City</label></td>
<td><input type="text" name="city"></td>
</tr>
<tr>
<td><label for="state_region">State or Region</label></td>
<td><select><option>Arizona</option></select></td>
</tr>
<tr>
<td><label for="pc">Postal Code</label></td>
<td><input type="text" name="pc"></td>
</tr>
<tr>
<td><label for="country">Country</label></td>
<td><select><option>USA</option></select></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td><label for="fax">Fax</label></td>
<td><input type="text" name="fax"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email"></td>
</tr>
</table>
</form>
</body>
I have the following HTML code for a check box:
<td class="myClass">
select<br><input type="checkbox" id="one" name="delete" value="one">
</td>
Its output is as below:
but I want the checkbox to be displayed exactly below the label, like so:
select
[]
How can I do that?
Just add style text-align:center; and display:block; to the container.
Good tip: (maybe you know it) If the container of the label and checkbox wll be <label>, the input share click event with the container. For examle:
<table>
<tr>
<td class="myClass">
<label>
Click me, to change Checkbox value !<br>
<input type="checkbox" id="one" name="delete" value="one" align="">
</label>
</td>
</tr>
</table>
check it out http://jsfiddle.net/G7JxA/
Add a span tag around the text, then assign a width and text-align:center to both the span and input.
HTML
<table>
<tr>
<td class="myClass">
<span>select<span>
<input type="checkbox" id="one" name="delete" value="one"/>
</td>
</tr>
</table>
CSS
.myClass{
width: 40px;
display:block;
text-align: center;
}
Working Example http://jsfiddle.net/GSRGX/
DEMO
Please check above demo.
.myClass gives text-align:center;
<table>
<tr>
<td class="myClass">
select<br><input type="checkbox" id="one" name="delete" value="one" align="">
</td>
</tr>
</table>
If you set position as relative for your checkbox, you can move it around with left:, right:, top:, bottom:.
The html code would look like this:
<td class="myClass">
select
<br/>
<input type="checkbox" id="one" name="delete" value="one" />
</td>
And the css:
#one {
position:relative;
left:12px;
}
I have made a JSFiddle demo.
I want to create a table where each td is a form field. What is the best way of approaching that? Should I create a regular table and apply css styles on the form fields to resemble the size of the td fields? Hmmm... what do you suggest?
You can place tags inside of a form easily, so I would recommend nesting a table in the form:
<form>
<table>
<tr>
<td>Name: <input type="text" name="name" /></td>
<td>Age: <input type="text" name="age" /></td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
Which would give you a one row, two column table with a labeled text box in each column. Be careful about nesting your HTML tags, this could get confusing fast if you made a large table/form.
One way is to use contenteditable
<html>
<table>
<tr>
<td>
<div contenteditable="true"></div>
</td>
</tr>
</table>
</html
People seem to be forgetting about display: table, display: table-row and display: table-cell!
Here's a demo jsFiddle.