creating space between fields

  • Profile Image
    plusmgt
    Asked on February 27, 2012 at 08:59 AM

    I have researched and found that I could add space between field with the ftree text tool and using a <br>

    This is not a successful solution because it keeps defaulting back to the "Click to edit this text..." and that looks bad.

    Please help with a solution to this, the collpased items clearly need a little space beneath them.

  • Profile Image
    plusmgt
    Answered on February 27, 2012 at 09:05 AM

    or does it? It seems to be working now but not terribly consistent.

  • Profile Image
    abajan
    Answered on February 27, 2012 at 01:46 PM

    I don't know if it's the type of break tag you're using that's causing the inconsistent results. I cloned the form and used XHTML compliant break tags and none of the free text fields reverted to the default text.

    An alternative to using free text elements containing break tags would be injected CSS. To adjust the bottom margin of all closed form collapse elements, use the following rule, and change the number of pixels (40) to your preference:

    .form-section-closed {
    margin-bottom: 40px;
    }


    To apply that margin to both closed and opened collapse elements, use the following:

    .form-collapse-table,
    .form-section-closed {
    margin-bottom: 40px;
    }

    Applying the above rules to only certain form collapse elements would require targeting them by their IDs. For instance, injecting the following rule will give the closed and opened states of just the first form collapse element in your form a bottom margin of 70 pixels:

    #section_202,
    #collapse_202 {
    margin-bottom: 70px;
    }

    (Firebug simplifies the job of discovering what selector to use.)

    One advantage of using CSS instead of break tags is that the size of the space can be adjusted in much finer increments.

    If you need further assistance with this or anything else form related, do let us know.