Why does my theme ruin the editor?

  • Profile Image
    Asked on January 03, 2017 at 06:41 PM

    I created a form. Looks good, works the way I need it to. Having a new form I needed to create, I saved the old form as a theme, made the new form without any customizations, and then applied the theme I just saved. And it looks like this in the editor. What's going on?

  • Profile Image
    Answered on January 04, 2017 at 01:46 AM


    We're sorry for the inconvenience you have.

    I have checked your form(id: 70027242564147) named "New Portraits Form" and I have seen the issue.

    I have forwarded this issue related to theme named "2017" to our software development team. Please remove or change your theme of the form until we will fix it. You can use our "Default theme" for now, as you can see the screenshot below:

    Thank you for reporting us.

  • Profile Image
    Answered on January 04, 2017 at 11:10 AM

    Hey petruzzo,

    It's due to the CSS code of the theme you've created. In particular, this part:

    .form-all {
        width : 100% !important;

    When you add the !important property, it over rides the form builder page's CSS.

    I removed the !important part from the theme and applied it again to your form New Portraits and now the builder looks ok.

    If you are seeing any other problems with your theme's CSS code, please let us know and we will gladly help you.

  • Profile Image
    Answered on January 04, 2017 at 11:49 AM

    Thank you. Why doesn't it do that with the original form the theme was saved from? Should changes be made to that form also?

  • Profile Image
    Answered on January 04, 2017 at 02:07 PM

    You should edit the theme and remove the !important declaration there to fix it and so you can use it in another form without getting the same problem again. 

    You have to go to your Themes section (https://www.jotform.com/mythemes), click and edit it. 

  • Profile Image
    Answered on January 04, 2017 at 02:22 PM

    Hey guys,

    @Welvin I actually made this change for preventing this issue to reoccur.

    @petruzzo I now tried to reproduce the issue with creating a theme that uses;

    .form-all{ width: 100% !important;}

    When I first injected the code while creating the form which is to be the theme, .form-all CSS did not affect the builder. But when you complete it as a theme and use it on an another form, then it overrides the form builder page.

    I will be talking this issue with our UI developers and so, thanks again for reporting us this issue,