What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    how to remove !important from CSS code

    Asked by campbuc on September 23, 2014 at 05:00 PM

    I am trying to increase the width of a particular label and through Chrome developer tool have finally realized that the following rule is overruling my CSS custom rule

    <style type="text/css">

       .form-label-left{

       width: 150px !important;

    }

    How can I get rid of the !important. This is overriding everything.

    Thanks,

    Beth H.

    label tool css code inject css !important
  • Profile Image

    Answered by ShadaeTrotman on September 23, 2014 at 05:24 PM

    Hi campbuc,

    Sorry about the issue with the CSS overriding your injected CSS code.

    To resolve the issue, you would add the !important to your injected CSS code.

    The code would look like this:

    .form-label-left {
        width: 500px !important;
    }

    You would use your desired size.

    You can see the full guide on how to inject your code at this link: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    I hope this helps!

  • Profile Image
    JotForm Support

    Answered by jonathan on September 23, 2014 at 06:41 PM

    Hi Beth,

    Yes it is correct that the word !important will override when used on the same class or element id# in the CSS rules.

    So if you want to prevent your CSS code from overriding the whole class

     .form-label-left{

       width: 150px !important;

    }

     

    then just remove the !important on it. So, it becomes like this

     .form-label-left{

       width: 150px;

    }

     

    I checked your jotform http://www.jotform.us/form/41348613057150 and I can see that the custom injected CSS code were already updated to this

     

    I will assume then that you now have a better understanding how to modify the CSS code on your jotform.

    Hope this help. Inform us if you need further assistance.

    Thanks!

     

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes