How To Add A Break Between Categories

  • Profile Image
    solatinagroup
    Asked on March 21, 2012 at 02:30 PM

    Please see the attached photo. We're trying to create a break between the Mental Health Experts and the Sexual Health Expert. Can't seem to figure out why there isn't one. Any solution would be much appreciated.

     

    Thanks.

  • Profile Image
    pinoytech
    Answered on March 21, 2012 at 06:12 PM

    Hi,

    Are you using IE8 to view your form? If yes, kindly refresh your browser and please let us know if the said issue still persist so we can further assist you.

    https://www.jotform.com/3332958298

    Here's attached image of your form using IE8

    Thank you!

  • Profile Image
    solatinagroup
    Answered on March 21, 2012 at 08:32 PM

     

    We're looking at it in both Chrome and Safari and it looks like the image below. There's still an extra space between Mental Health Experts & Sexual Health Experts. It doesn't look like the image you inserted above (as it should).

     


  • Profile Image
    idarktech
    Answered on March 21, 2012 at 10:35 PM

    Hi there,

    Sorry for getting back to you so late. Can you please try to inject this CSS Codes to your form and see if this helps? Thanks.

    .form-single-column

    .form-radio-item +

    .clearfix +

    .form-radio-item {

    margin-top:15px;

    }

     

    .form-single-column

    .form-radio-item +

    .clearfix +

    .form-radio-item +

    .clearfix +

    .form-radio-item {

    margin-top:5px;

    }

    You can increase the space between the first and 2nd option by changing 15px value. You can see a preview here: http://www.jotform.me/form/20808128724453?

    Let us know if you have further questions. Thank you so much!

  • Profile Image
    solatinagroup
    Answered on March 22, 2012 at 02:29 PM

    I injected the CSS codes you suggested and it still didn't work. There must be a simple fix to this. This is the current CSS code we have:

     

    .radio-button-item-list {

    position: absolute;

    margin-left: 5px;

    line-height: 1.4;

    }.form-single-column span {

    margin-bottom: 5em;

    }.form-single-column span + span,

    .form-single-column span + span

    + span + span + span + span + span

    + span + span {

    margin-bottom: 0.7em;

    }.form-single-column span + span

    + span + span + span + span + span {

    margin-bottom: 2.2em;

    }

  • Profile Image
    Mike_T
    Answered on March 22, 2012 at 05:15 PM

    Have you checked provided above form example?

    http://www.jotform.me/form/20808128724453

    If you are happy with the result, you can Clone mentioned form to your account.

    Please let us know if you need any further assistance.

  • Profile Image
    solatinagroup
    Answered on March 22, 2012 at 10:36 PM

    @Mike_T,

    We have a winner. Thank you for the clone. Everything works perfect now. Love JotForm customer support.

    David

  • Profile Image
    solatinagroup
    Answered on March 28, 2012 at 06:42 PM

    Hi Mike_T,

    The above script seems to work in every browser except Firefox. Any idea why? Can we fix it?

  • Profile Image
    NeilVicente
    Answered on March 28, 2012 at 07:11 PM

    @solatinagroup

    Sorry for butting in, but increasing your form's width (Form Style > Form Width) to around 508 should fix your problem.

  • Profile Image
    solatinagroup
    Answered on March 28, 2012 at 07:22 PM

    Not butting in at all! Thanks. I just changed the width. I'll look to see if it's fixed in FF.

  • Profile Image
    idarktech
    Answered on March 28, 2012 at 10:19 PM

    @solatinagroup,

    I just visited your website using FF and it's perfectly fine now. Let us know if you have any other questions. Thanks.

  • Profile Image
    solatinagroup
    Answered on March 28, 2012 at 11:15 PM

    Great! Thanks again for the awesome customer support :)

  • Profile Image
    Allenlizia
    Answered on March 29, 2012 at 01:35 AM

    Great discussions ! queries will leads to innovations !!!!!!!!