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

4

1 回答 1

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">
于 2013-10-23T18:12:13.340 回答