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

  • lharriman
    Asked on July 11, 2016 at 8: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?

    Why isnt my center panel transparent when I view it in preview or on the web? Image 1 Screenshot 20

  • Kiran Support Team Lead
    Replied 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!

  • lharriman
    Replied on July 12, 2016 at 8: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?

  • Welvin Support Team Lead
    Replied 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.

  • lharriman
    Replied on July 12, 2016 at 1: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 

  • Kiran Support Team Lead
    Replied on July 12, 2016 at 1: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!