How can I add section headings to the Editor dialog?

How can I add section headings to the Editor dialog?

bpcreatesbpcreates Posts: 5Questions: 2Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • bpcreatesbpcreates Posts: 5Questions: 2Answers: 0
    edited September 2015

    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: ____________

  • JokerDanJokerDan Posts: 4Questions: 0Answers: 0
    edited September 2015

    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>
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

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

    Allan

  • bpcreatesbpcreates Posts: 5Questions: 2Answers: 0

    Thanks, this is perfect.

This discussion has been closed.