Form Designer Tool: "Other" checkbox when "Allow Other" is enabled does not match the styling of the other regular check boxes

  • Profile Image
    Beeri
    Asked on March 09, 2016 at 05:38 AM

    I want to make my Other checkboxes where users can input text to match the regular, larger checkboxes above them. How can I do this?

     

  • Profile Image
    Jan
    Answered on March 09, 2016 at 07:13 AM

    You will need to apply custom CSS in order to align and match the "other" checkboxes to the regular options.

    Please try injecting this custom CSS and check if this will work for you.

    .form-checkbox-other {
    vertical-align: middle;
    margin-right: 1px !important;
    margin-left: 4px !important;
    margin-top: 0px !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    left: 4px;
    width: 18px;
    height: 18px;
    background-color: transparent;
    border: 2px solid #828282;
    }

    Here's a guide on how to inject custom CSS. Here's how it looks like: 

    Hope this helps. Thank you.

  • Profile Image
    Beeri
    Answered on March 09, 2016 at 07:51 AM

    Hi Jan, 

    THanks for responding. Unfortunately the code doesn't do what I am looking for. As you can see, your other box is not identical to the regular boxes. I want the box to have the same black outline, and have a white background. The checkmarks on the normal boxes is a small green checkmark graphic, while the other box turns blue with a small white checkmark

  • Profile Image
    Charlie
    Answered on March 09, 2016 at 09:36 AM

    It looks like it's a bug on the check box/radio button themes that we have, it should actually get the same styling for the "Other" check box. Let me forward this to our developers to have it checked and fixed. Apologies for the inconvenience.

    I'll try to come up with a working CSS code as an alternative, I'll get back to you as soon as I'm able to work it out.

  • Profile Image
    Charlie
    Answered on March 10, 2016 at 09:27 AM

    Hi,

    So I managed to find the working CSS code as an alternative while this is still being fixed.

    .form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other::before {

        background-color : transparent !important;

        border : 2px solid #828282 !important;

        content : '' !important;

        position : absolute !important;

        display : inline-block !important;

        vertical-align : baseline!important ;

        margin-right : 4px !important;

        -moz-box-sizing : border-box !important;

        -webkit-box-sizing : border-box !important;

        box-sizing : border-box !important;

        -webkit-border-radius : 2px !important;

        -moz-border-radius : 2px !important;

        border-radius : 2px !important;

        left : 4px !important;

        top: 2px !important;

        width : 18px !important;

        height : 18px !important;

        cursor : pointer !important;

    }

     

    .form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other {

       cursor: pointer;

      -webkit-appearance: none !important;

      -moz-appearance: none !important;

      appearance: none !important;

      outline: 0 !important;

    }

     

    .form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other:checked::after {

        opacity : 1 !important;

        background-color : #008000 !important;

        box-shadow : 0 3px 0 0 #008000, 3px 3px 0 0 #008000, 6px 3px 0 0 #008000, 9px 3px 0 0 #008000, -23px 6px 0 0 rgba(255, 255, 255, 0.68), 10px 1px 0 0 rgba(255, 255, 255, 0.68);

        transform : rotate(-45deg) !important;

        content : '' !important;

        position : absolute !important;

        z-index : 10 !important;

        display : inline-block !important;

        top : 7px !important;

        left : 10px !important;

        width : 4px !important;

        height : 4px !important;

    }

    You can paste it under your CSS tab in your Form Designer Tool. However, make sure that you don't have other CSS code conflicting with it. Here's my cloned form using that code: https://form.jotform.com/60693632275965. You can clone it to have a copy of it in your account and review how I setup my CSS there. Here's a guide on how to clone my form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Let us know if that works as a temporary workaround.