How to override Inline style on form element with inject CSS function?

  • Profile Image
    markashton
    Asked on March 09, 2011 at 11:52 AM

    Hi 

    Please relate to this form: http://www.jotform.com/form/10673429263

    My objective is to position the pop-up description for the element called First Name

    The element First Name has an ID of ID_44. The DIV tag that contains the "class" form-description has an inline style applied to it, notably style=right: -211px;

     

    I would like to overide this for this ID element. My HTML skills are challenged here.

    I've tried this:

    #id_44 .form-description {

     

    right: -250px;

    }

     

    Can you advise on code on how to do this via CSS inject function.

    I would be most grateful

    Regards Mark

  • Profile Image
    liyam
    Answered on March 09, 2011 at 01:37 PM

    Hello,

    Can you give us a screenshot on how it looks like on your browser?

    Seems that you have gotten the css injection id and class right.

  • Profile Image
    markashton
    Answered on March 09, 2011 at 02:21 PM

    Hi Liyam

    I'm trying to move the pop-up description over to the right margin - to about the normal default position. If you have 2 elements on one line then you have applied the shrink command. This seeems to automatically create an inline style of right margin -211px.

    The problem is that the code that I cite above does not overide the inline style - as it shouldn't I suppose - an inline style overrides an external CSS in HTML law.

    My question is do you know a HTML hack that I can employ to override the inline style that is automatically created.

    I don't think the screenshot would help you - you are seeing the same thing as me

     

  • Profile Image
    liyam
    Answered on March 10, 2011 at 07:23 AM

    I see, I checked your code and you almost had it actually but missing a few things.  One reason for the lack of overriding is because the CSS style you're trying to override is already an inline CSS. An inline CSS normally overrides IDs and classes.

    In your CSS injection, you have this:

    #id_44 .form-description div[style]{
    right: -250px;
    }

    To explain you had div[style] and .form-description switched. Also, you need to join them together.  Lastly, you need to add !important for prioritization.  You can try out the code below and see if it will work this time:

    #id_44 div[style].form-description {
    right: -400px !important;
    }

    Hope this helps

  • Profile Image
    markashton
    Answered on March 10, 2011 at 07:57 AM

    Thanks Man - you're a genius

    I'm relatively new to this - you learn something new everyday eh?

    I was wondering what that !important thing was ;)

    Regards Mark

  • Profile Image
    liyam
    Answered on March 10, 2011 at 08:13 AM

    Good to know that it works for you.  :)