How can I add section headings to the Editor dialog?

bpcreates

I'd like to break up the fields in an Editor dialog into a couple of sections, with labels like "User Information" and "Optional Background Info". Is there a way to specify a row that has a label but no input control next to it?

allan

Hi,

Interestingly I've just been thing along these lines for how it can be done in Editor at the moment. Basically all you need to do is use the show() and hide() methods to show and hide the fields as required. The open and displayReorder events can be used to attach buttons to the Editor form that will perform those actions.

I'm planning to write up a blog post about this in a couple of weeks time.

Regards,
Allan

bpcreates

Don't show() and hide() show or hide the entire field, though -- including the field and label? What I'm looking for, if it's unclear, is this kind of layout:

Personal Info

First name: ___________

Last name: ___________

Address Info

Street: ___________

City: _____________

State: ___________

Automobile Info (Optional)

Make: ___________

Model: ___________

Year: ____________

JokerDan

You could do it in plain HTML/CSS, I imagine the editor is the software that can be brought?

See this for another solution;
http://77.103.67.102/block.php

<style>
/* Style for HTML p/span Solution */
.label {
    display: table-cell; 
    width: 100px;
}

.blankField {
    display: table-cell;
    border-bottom: 1px solid black;
}

p.container {
    display: table;
    width: 100%;
}


/* Style for HTML Table Solution */

.labelTable {
    width: 100px;
}

.blankFieldTable {
    border-bottom: 1px solid black;
}

th {
    text-align:left;
    padding-top:15px;
}

</style>

<h3 style="color:red">HTML/CSS - Not In Table</h3>
<div>
    <h4>Personal Info</h4>
        <p class="container">
            <span class="label">First Name:</span><span class="blankField"></span>
        </p>
        <p class="container">
            <span class="label">Last Name:</span><span class="blankField"></span>
        </p>
    <h4>Address Info</h4>
        <p class="container">
            <span class="label">Street:</span><span class="blankField"></span>
        </p>
        <p class="container">
            <span class="label">City:</span><span class="blankField"></span>
        </p>
        <p class="container">
            <span class="label">State:</span><span class="blankField"></span>
        </p>
        <h4>Automobile Info (Optional)</h4>
        <p class="container">
            <span class="label">Make:</span><span class="blankField"></span>
        </p>
        <p class="container">
            <span class="label">Model:</span><span class="blankField"></span>
        </p>
        <p class="container">
            <span class="label">Year:</span><span class="blankField"></span>
        </p>
</div>

<hr />

<h3 style="color:red">HTML/CSS - In Table</h3>
<table width="100%" cellpadding="6">
    <tbody>
    <tr>
        <th colspan="2">Personal Information</th>
    </tr>
    <tr>
        <td class="labelTable">First Name:</td>
        <td class="blankFieldTable"></td>
    </tr>
    <tr>
        <td class="labelTable">Last Name:</td>
        <td class="blankFieldTable"></td>
    </tr>
    <tr>
        <th colspan="2">Address Information</th>
    </tr>
    <tr>
        <td class="labelTable">Street:</td>
        <td class="blankFieldTable"></td>
    </tr>
    <tr>
        <td class="labelTable">City:</td>
        <td class="blankFieldTable"></td>
    </tr>
    <tr>
        <td class="labelTable1">State:</td>
        <td class="blankFieldTable"></td>
    </tr>
        <tr>
        <th colspan="2">Automobile Info (Optional)</th>
    </tr>
    <tr>
        <td class="labelTable">Make:</td>
        <td class="blankFieldTable"></td>
    </tr>
    <tr>
        <td class="labelTable">Model:</td>
        <td class="blankFieldTable"></td>
    </tr>
    <tr>
        <td class="labelTable1">Yea:</td>
        <td class="blankFieldTable"></td>
    </tr>
    </tbody>
</table>

allan

Oh I see - use this plug-in in this case, which is how I do exactly that in the Editor purchase form.

Allan

bpcreates

Thanks, this is perfect.