Remove Space under 'Checkbox in Dropdown' widget after making selection.

  • Profile Image
    gerttcm
    Asked on May 24, 2016 at 02:04 AM

    Hi there,

     

    Can you please help me by removing the space under the 'Checkbox in Dropdown' widget after a selection has been made?

     

    Herewith what happens:

    A. BEFORE SELECTION

    B. SELECTION BEING MADE

    C. AFTER SELECTION WAS MADE (NOW HAS A BIGGER SPACE UNDERNEATH)

     

  • Profile Image
    Chriistian
    Answered on May 24, 2016 at 03:48 AM

    Please try to inject this custom CSS code in your form to fix the issue:

    li#id_87 {

        height: 41px;

        z-index: 1000000;

    }

    To inject custom CSS code in your form please follow the instruction provided in this article: How to Inject Custom CSS Codes.

     

    Do let us know if you need further assistance.
    Regards.

     

  • Profile Image
    gerttcm
    Answered on May 24, 2016 at 04:54 AM

    It works perfectly!! Thanks Chriistian! 

  • Profile Image
    gerttcm
    Answered on May 24, 2016 at 08:04 AM

    Apologies Christian, but there seems to still be an issue, as the options below above can only be selected on the bottom part of the option.

    Meaning the mouse only selects the options underneath the blue part, not above:

     

     

  • Profile Image
    Charlie
    Answered on May 24, 2016 at 11:43 AM

    I'm not sure what form you are currently working on. I see there are two forms with almost the same design and layout.

    Here's my cloned form: https://form.jotform.com/61444732234956. See if that works.

    These are the changes I made:

    1. First, remove the CSS code provided by my colleague.

    2. Now select the widget and adjust the height in the properties, see screenshot below. Adjust it to "55".

    3. After that, add this custom CSS code in your Form Designer Tool's custom CSS tab:

     /*Next button height*/

    #cid_79 {

            height : 90px !important;

     }

     

    /*Adjust position of insurance and replacement value*/

    #id_72, #id_80 {

            top : -20px !important;

     }

     

     

    Let us know if that works.

  • Profile Image
    gerttcm
    Answered on May 25, 2016 at 02:35 AM

    Not a genius....yeah right. Rock solid! Thanks again Charlie!