1

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:

Input forms overrunning WordpressMetabox

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><a href="#" class="publish-attribute-delete" data-id="1">Delete</a> | <a href="#" class="person-edit" data-id="1">Edit</a></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

Christian Mayne
  • 1,709
  • 7
  • 26
  • 42
  • What we need is your css (style.css) – Romain Oct 23 '13 at 15:59
  • There's no actual style at the moment outside of the predefined Wordpress class "widefat". – Christian Mayne Oct 23 '13 at 16:01
  • Lol, so what you need is create a css that work with your html =) – Romain Oct 23 '13 at 16:06
  • Lol! I guess what I'm wondering is why the top table, using the widefat class responds to the size of the metabox, whereas the second table doesn't, even though it uses the same class – Christian Mayne Oct 23 '13 at 16:11
  • 1
    You aren't using the same class and element inside your form, so it's normal that you don't have the same design. If you want to adjust your "form table", you have to add some css tags to your project. – Romain Oct 23 '13 at 16:20

1 Answers1

2

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">
Community
  • 1
  • 1
brasofilo
  • 25,496
  • 15
  • 91
  • 179
  • Well...I'm using a form in a metabox because I'm trying to enter data through a metabox...That said, your answer worked perfectly, so thank you, but I'd love to hear how it should be done :) – Christian Mayne Oct 23 '13 at 20:16
  • 1
    I've added an example with all whistles and bells that a meta box needs ;) There are plenty of them at WPSE, just search for [`add_meta_boxes + save_post + wp_nonce_field`](http://wordpress.stackexchange.com/search?q=%2Badd_meta_boxes+%2Bsave_post+%2Bwp_nonce_field). – brasofilo Oct 23 '13 at 21:07
  • This is great, are you for hire :) – Christian Mayne Oct 24 '13 at 00:11