Advanced designer is not working properly

  • Profile Image
    Mimich
    Asked on March 04, 2017 at 12:51 PM

    Hi, Thats what I see on my screen when I go to full css designer; I have logged out, cleared cookies but the problem persists.

     

  • Profile Image
    Welvin
    Answered on March 04, 2017 at 05:37 PM

    How about on another browser? Can you give it a try? Your screenshot is in Firefox, right? How about its version? Please check that as well, and make sure you have the latest version. 

    Also, please check your browser console for related errors. The following guides should help you navigate the console area:

    https://developers.google.com/web/tools/chrome-devtools/debug/console/console-ui?hl=en

    https://developer.mozilla.org/en/docs/Tools/Browser_Console

    Please take a screenshot and upload that on this thread. You have to access this thread to upload the screenshot (guide: https://www.jotform.com/answers/277033).

  • Profile Image
    Mimich
    Answered on March 08, 2017 at 02:55 PM

    This is what uis happening each time I try to edit the form with the editor: https://youtu.be/Hgphowa7Ne8

     

  • Profile Image
    jonathan
    Answered on March 08, 2017 at 05:26 PM

    In the video it shows you were modifying the form width to about 20px... that was the reason form appear like that.

    I also noticed that there were error in the CSS codes used on the form. It could be causing the glitch as well. You can try removing first the CSS codes or correct the mistakes and check again.

    I cloned your form so that I could test using my Form Builder, but I could not reproduce the issue. 

    I corrected the CSS codes used on the form also.

     

    .supernova, .jotform-form, .form-all {

        background-color : transparent !important;

    }

    .form-required {

        float : left;

        margin-left : -25px;

        position : relative;

        top : 10px;

    }

    .form-line.jf-required {

        padding : 1px 21px 1px 10px;

    }

        .form-number-input.form-textbox {

        width : 130px;

        }

        button#input_24 {

        border : none !important;

        margin-top : 35px !important;

    }

    .form-textbox {

        line-height : 20px;

    }

    ---

    Try replacing your form with this as well. Let us know how it goes.