Why isn't my center panel transparent when I view it in preview or on the web?

  • Profile Image
    lharriman
    Asked on July 11, 2016 at 08:40 PM

    I am using a theme with a transparent center panel over a background image. It looks great when I'm in the builder, but when I view the form in preview or elsewhere, the frame becomes opaque. This image shows the effect I'm going for. Any help?

  • Profile Image
    Kiran
    Answered on July 11, 2016 at 11:00 PM

    The issue is being caused by the form-section which is set to white background and overriding the the transparent setting on the form. Please inject the following CSS code to your JotForm to make the background transparent.

    .form-section {

        background: transparent !important; 

    }

    The form should be now displaying as it is displayed in the preview. Thank you!

  • Profile Image
    lharriman
    Answered on July 12, 2016 at 08:47 AM

    Great, thanks. But now I'm having several problems with the mobile version: the background isn't fixed, the size is wrong, and the colored boxes don't align with the input fields. Can you help me with this?

  • Profile Image
    Welvin
    Answered on July 12, 2016 at 11:11 AM

    I've fixed it for you by injecting the following custom CSS codes to your form:

    /* Full Name Field Override */

    #id_3 {

        width: 100%;

    }

    /* Checkbox/Radio Button override */

    .form-checkbox-item label, .form-radio-item label {

        white-space: normal;

    }

    /* Submit button stretch and center on mobile */

    @media only screen and (max-device-width: 768px) {

    .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {

        width: 100%;

    }

    }

    Please check again and let us know if you need any further assistance.

  • Profile Image
    lharriman
    Answered on July 12, 2016 at 01:01 PM

    That fixes everything but the background.

    I want the form to scroll but the background image to remain fixed. Can you help me with this?

    thanks,

    lucas 

  • Profile Image
    Kiran
    Answered on July 12, 2016 at 01:08 PM

    Your other question is moved to a separate thread and shall be answered there shortly.

    https://www.jotform.com/answers/880819

    Thank you!