I have a Wordpress plugin with some tables and input forms. The tables are built using the standard Wordpress table widefat class. The input forms are embedded into cells in the widefat table.
Where I am just displaying data, the table resizes to fit the metabox. Where I am using input fields, the table overflows the metabox, see picture:
I would like the input table to resize like the data table.
This is how the normal table renders:
<table class="widefat" id="item_publication_attributes">
<tr>
<th class="type"><b>Type</b></th>
<th class="date"><b>Date</b></th>
<th class="name"><b>Name</b></th>
<th class="address"><b>Address</b></th>
<th class="gender"><b>Map</b></th>
<th></th>
</tr>
<tr class="publish-attribute publish-attribute-1">
<td class="type">Publisher</td>
<td class="date">15/2/1971</td>
<td class="name">Publish Company</td>
<td class="location">63 The Street, The Town, Cambridgeshire</td>
<td class="map-icon" style="font-size:70%">[map]</td>
<td>Delete | Edit</td>
</tr>
</table>
And this is how the Form table renders:
<form>
<input type="hidden" name="post_id" id="add_publishing_attribute_post_id" value=2624/>
<table class="widefat" id="add_new_publishing_attribute">
<tr id="add_new_publishing_attribute_row">
<td class="type">
<select name="type" id="add_attribute_type">
<option value="0">ID 0</option>
<option value="1">ID 1</option>
<option value="2">ID 2</option>
</select>
</td>
<td class="dd"><input type="text" name="dd" id="add_attribute_dd" placeholder="dd" /></td>
<td class="mm"><input type="text" name="mm" id="add_attribute_mm" placeholder="mm" /></td>
<td class="yyyy"><input type="text" name="yyyy" id="add_attribute_yyyy" placeholder="yyyy" /></td>
<td class="name"><input type="text" name="name" id="add_attribute_name" placeholder="name" /></td>
<td class="location"><input type="text" name="location" id="add_attribute_location" placeholder="location" /></td>
<td><input type="submit" name="submit" id="add_new_attribute_submit" value="Add"/></td>
</tr>
</table>
</form>
Grateful for any suggestions
What I don't get is why you're using a form inside a meta box... We just simply drop our input fields there, and save_post takes care of there rest, here's a full example.
To fix the table layout, I've found an answer here: Why is my HTML table not respecting my CSS column width?
Use: table-layout:fixed:
<table class="widefat" id="add_new_publishing_attribute" style="table-layout:fixed">
Related
I had a 13 column table nicely aligned until I added input fields, which broke alignment in the column (vertical) direction. Reducing input size to 3vw didn't help, and now the cells in that row are too small relative to the other rows and cells.
I also tried adding a colSpan to the data cells and headers, but it had no effect.
How can I align the columns of the following table:
<table className={style2}>
<thead>
<tr>
<th colSpan={13}>
<h3 className={cell_style}>Today: Workout A: TB Stool, TB Rows, DB Incline, Lat Raises
</h3>
</th>
</tr>
<tr>
<th className={cell_style}>#</th>
<th colSpan={3} className={cell_style}>TB Stool</th>
<th colSpan={3} className={cell_style}>TB Rows</th>
<th colSpan={3} className={cell_style}>DB Incline</th>
<th colSpan={3} className={cell_style}>Lat Raises</th>
</tr>
</thead>
<tbody>
<tr>
<td className={cell_style}>#</td>
<td className={cell_style}>Weight</td>
<td className={cell_style}>Reps</td>
<td className={cell_style}>Reserve</td>
<td className={cell_style}>Weight</td>
<td className={cell_style}>Reps</td>
<td className={cell_style}>Reserve</td>
<td className={cell_style}>Weight</td>
<td className={cell_style}>Reps</td>
<td className={cell_style}>Reserve</td>
<td className={cell_style}>Weight</td>
<td className={cell_style}>Reps</td>
<td className={cell_style}>Reserve</td>
</tr>
<tr>
<form action="">
<td className={cell_style} colSpan={1}>#</td>
<td className={cell_style} colSpan={1}><input type="text" className={input_style} value='50' /></td>
<td className={cell_style}><input type="text" className={input_style}/>15</td>
<td className={cell_style}><input type="text" className={input_style}/>0</td>
<td className={cell_style}><input type="text" className={input_style}/>58</td>
<td className={cell_style}><input type="text" className={input_style}/>14</td>
<td className={cell_style}><input type="text" className={input_style}/>2</td>
<td className={cell_style}><input type="text" className={input_style}/>20</td>
<td className={cell_style}><input type="text" className={input_style}/>13</td>
<td className={cell_style}><input type="text" className={input_style}/>1</td>
<td className={cell_style}><input type="text" className={input_style}/>5</td>
<td className={cell_style}><input type="text" className={input_style}/>15</td>
<td className={cell_style}><input type="text" className={input_style}/>0</td>
</form>
</tr>
</tbody>
</table>
A form is not allowed to be a child element of a table, tbody or tr.
You can have an entire table inside a form. You can have a form inside a table cell. Bu you cannot have part of a table inside a form.
See similar: Form inside a table
To fix your issue, you will need to wrap your whole table inside the form.
Remove the form from below:
<tr>
<form action="">
[...]
</form>
</tr>
And wrap your whole table:
<form action="">
<table className={style2}>
[...]
</table>
<form>
See docs, HTML form tag.
you cannot wrap td elements inside a form. you have to wrap the whole table :
<form>
<table>
<tr>
<td><input type="text" value="10" class=""></td>
....
</tr>
</table>
</form>
also there is no className attribute. you have to use class=""
input values should be in the value attribute
i am designing a contact page for a friend he gave me a templete to use for his site it has a contact page already built in with the following code
<td><form method="post" action="/frms/contactmail.pl">
<input type="hidden" name="SoupermailConf" value="/frms/contact.con">
<table width="100%" border="0" cellpadding="0" align="center" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellpadding="4" cellspacing="1">
<tr>
<td align="Right"><b>Your
Name: <span class="style1">*</span></b></td>
<td width="70%"><input type="TEXT" name="Name" style="width: 90%;">
</td>
</tr>
<tr>
<td align="Right"><b>E-mail
Address: <span class="style1">*</span></b></td>
<td><input type="TEXT" name="Name2" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>Company:</b></td>
<td><input type="TEXT" name="Name3" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>How
did you
find us?</b></td>
<td><input type="TEXT" name="Name4" style="width: 90%;"></td>
</tr>
<tr>
<td align="right"><b> Questions: <span class="style1">* </span></b></td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="center"><textarea name="Question" rows="8" style="width: 90%;" wrap="VIRTUAL"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit" value="Submit Form">
<br>
</td>
</tr>
</table></td>
</tr>
</table>
</form>
I do not see where there is an action or mailto command how do i need to change this to make it email to a specific email address.
Looking at the <form> tag, the specified action is a Perl/CGI script - "/frms/contactmail.pl".
Looking at the hidden field named "SoupermailConf", I'd guess this is using the (VERY old) Perl/CGI script Soupermail.
I would recommend you update to something else (perhaps PHP based) if you (or your friend) can?
But, if you cant then according to the manual a hidden field named Email should do the trick.
<input type="hidden" name="Email" value="someone#your.website" />
After looking at the manul pages for the mailer and some examples for the config.txt file I needed to write to make it work.
I have some issues with my tables. It seems that the distance between the field name and text boxes are a bit big.
Are there any issues that I am making which causing this? How can I reduce the spaces? Check out the image below.
Here's my HTML:
<h5>Free Room of Cleaning & Carpet Audit</h5>
<table border="0" border-collapse:collapse; width:80% colspan="3">
<tbody>
<tr>
<td>Name: <span style="color:red;"><strong>*</strong></span></td>
<td>[text* client-name] </td>
</tr>
<tr>
<td>Phone: <span style="color:red;"><strong>*</strong></span></td>
<td> [text* phone] </td>
</tr>
<tr>
<td>Email: <span style="color:red;"><strong>*</strong></span></td>
<td>[email* email]</td>
</tr>
<tr>
<td>Best time to call: </td>
<td>[select best-time "Morning" "Afternoon" "After 5pm"] </td>
</tr>
<tr>
<td>Address:</td>
<td> [text address]</td>
</tr>
<tr>
<td>City</td>
<td>[text city]</td>
</tr>
<tr>
<td>State: </td>
<td>[text state]</td>
</tr>
<tr>
<td>Zip:</td>
<td>[text zip]</td>
</tr>
<tr><td colspan="2">Questions/Comments
[textarea questions id:questions]
</td></tr>
<tr><td colspan="2">[submit "Submit"]</td>
</tr>
</tbody>
</table>
Here is a JSFiddle demonstrating the issue: https://jsfiddle.net/sLv3e8f5/
The way the browser lays out tables by default, each column is sized to try to fit the width of its largest child element. In this case the largest child element is the table cell with the value "best time to call", which is causing the column to expand in width to accommodate that length.
You can give the first column of your table a fixed width to fix this, which will cause your longest line, "best time to call", to wrap.
In the following example I added an id to the table, then I targeted the first column of the table using CSS and gave it a width. I also gave your "Questions/Comments" form a width so it matches up.
Screenshot of the result:
Live Demo:
#thetable td:first-child {
width: 70px;
}
#qa {
width: 240px;
}
<h5>Free Room of Cleaning & Carpet Audit</h5>
<table id="thetable" border="0" border-collapse:collapse; width:80% colspan="3" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td>Name: <span style="color:red;"><strong>*</strong></span></td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Phone: <span style="color:red;"><strong>*</strong></span></td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Email: <span style="color:red;"><strong>*</strong></span></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Best time to call: </td>
<td><select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> </td>
</tr>
<tr>
<td>Address:</td>
<td> <input type="text"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text"></td>
</tr>
<tr>
<td>State: </td>
<td>[text state]</td>
</tr>
<tr>
<td>Zip:</td>
<td><input type="text"></td>
</tr>
<tr><td colspan="2">Questions/Comments
<textarea id="qa" rows="4" cols="50">
</textarea>
</td></tr>
<tr><td colspan="2"><input type="submit"></td>
</tr>
</tbody>
</table>
JSFiddle Version: https://jsfiddle.net/sLv3e8f5/2/
Try adding cellspacing="0"and cellpadding="0" on your table,
Add a
margin-left:3px;
to the
<td>
For example,
<td style="margin-left:3px;">[text* client-name]</td>
Your spaces are being caused by the "Best time to call" cell. Wrap that cell to two lines to remove the excess spaces.
because table cell is aligned by "Best time to call: ".
how about use <ul><li>
Getting rid of tables opens you up to a world of possibilities with CSS Styling.
The following is a very quick and dirty example:
label {
/*float:left;*/
width: 8em;
display:block;
clear:both;
margin-top: 10px;
}
input, select {
float:left;
margin-top: 10px;
margin-left: 20px;
}
label.required::after {
content:'*';
color: #F00;
padding-left:0.25em;
}
.required+input, .required+select
{
background-color:#FCC;
}
<fieldset>
<legend>Free Room of Cleaning & Carpet Audit</legend>
<label class="required" for="name">Name:</label>
<input type="text" id="name" name="name" />
<label class="required" for="phone">Phone:</label>
<input type="text" id="phone" name="phone" />
<label class="required" for="email">Email:</label>
<input type="text" id="email" name="email" />
<label for="call">Best time to call:</label>
<select id="call" name="call">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<label for="Address">Address:</label>
<input type="text" id="Address" name="Address" />
</fieldset>
I want to make my website more mobile friendly. For example, I'd like to declutter the input forms when viewed on a mobile device. My search form holds 5 fields for different search criteria, but I'd like the form to change to 1 field with a drop down box when viewed on a mobile device.
And would this make make my website more responsive, or would this be a pointless change?
I'm thinking the HTML would go from this:
<!-- ... -->
<td align="right">Client Ref :</td>
<td align="left"><input type="text" name="sp:def:address_id" size="9" maxlength="9"></td>
<td align="right">Invoice Number :</td>
<td align="left"><input type="text" name="sp:def:invoice_number" size="9" maxlength="9"></td>
<td align="right">Email :</td>
<td align="left"><input type="text" name="sp:def:email" maxlength="100"></td>
</tr>
<tr>
<td align="right">Last Name :</td>
<td align="left"><input type="text" name="sp:def:last_name" maxlength="36"></td>
<td align="right">Postcode :</td>
<td align="left"><input type="text" name="sp:def:postcode" size="10" maxlength="9"></td>
<td align="left"> </td>
<!-- ... -->
...to something like this:
<select>
<option value="#">Client Ref</option>
<option value="#">Invoice Number</option>
<option value="#">Email</option>
<option value="#">Last Name</option>
<option value="#">Post Code</option>
</select>
<input name="" type="text" size="40"/>
I am trying to create a group of elements in html (Yes, in HTML ONLY!!! I'm trying not to apply CSS yet, for this!!!) form using table, under the named 2. Pizza Order Details, as you can see here:
Right now I'm stuck on the Type of pizza element. I want to make the colon (:) for Type of Pizza to be placed in line in between (but after!) the words "Type of" and "Pizza", like in Screenshot01 but instead I'm getting this:
My colon (:) for Type of Pizza comes directly right after the word Pizza instead. I don't want this. I need it to be placed like in Screenshot01.
Here is the code I made:
<fieldset>
<legend>2. Pizza Order Details:</legend>
<table style="width:860px">
<tr>
<td align="right">Type of <br>Pizza :</td>
<td>
<select>
<option value=""></option>
<option value="Hawaiian Chicken">Hawaiian Chicken</option>
<option value="Cheese Deluxe">Cheese Deluxe</option>
<option value="Chicken Pepperoni">Chicken Pepperoni</option>
<option value="BBQ Chicken">BBQ Chicken</option>
<option value="Super Supreme">Super Supreme</option>
</select>
</td>
<td style="width:1px" align="left"><strong>|</strong></td>
<td style="width:70px" align="right">Quantity :</td>
<td><input size="3" placeholder="0" type="text"></td>
</tr>
<tr>
<td align="right">Size :</td>
<td>
<input type="radio" name="size">Small
<input type="radio" name="size">Medium
<input type="radio" name="size">Big
</td>
<td style="width:1px" align="left"><strong>|</strong></td>
<td style="width:70px" align="right">Topping :</td>
<td>
<input type="checkbox" name="topping" value="Cheese">Cheese
<input type="checkbox" name="topping" value="Pepperoni">Pepperoni
<input type="checkbox" name="topping" value="Sausages">Sausages
<input type="checkbox" name="topping" value="Olives">Olives
</td>
</tr>
<tr>
<td align="right">Date :</td>
<td><input size="12" placeholder="dd/mm/yyyy" type="text"></td>
<td style="width:1px" align="left"><strong>|</strong></td>
<td style="width:70px" align="right">Time :</td>
<td><input size="7" placeholder="hh/mm" type="text"></td>
</tr>
</table>
</fieldset>
Kindly point out what my errors, or what I'm missing here? Thanks!
Your approach is wrong, because you are using <br> ,which will break the line and the : will come accordingly.
You can use <td align="right">Type of Pizza :</td> .
This will show the label on one line, which is really good approach.