Change the width of a shrunk field

  • Profile Image
    hpelanda
    Asked on December 06, 2016 at 08:44 AM

    Hello,

    In my form called Time Sheets I've tried changing the width of the field on the form design option but no matter the number of pixels I use the width does not change. I'd like to do this for all the fields "time" and make them all larger. Could you help me with this?

     

    Thank you

  • Profile Image
    owen
    Answered on December 06, 2016 at 09:02 AM

    Hi,

    It is doable with custom CSS codes. Please first see how you can inject them:

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

    Then please inject the following code:

    .form-line.form-line-column.form-col-2 {

        width : 200px;

    }

     

    .time-dropdown.form-dropdown {

        width : 55px;

    }

    Please try this and let us know if you can not obtain the desired look. 

    Thank you for contacting us.

  • Profile Image
    hpelanda
    Answered on December 06, 2016 at 09:06 AM

    Thank you, that worked!

  • Profile Image
    hpelanda
    Answered on December 06, 2016 at 09:15 AM

    Actually, it worked when I'm in the design page of the form, but when I click on preview form or when I publish it the change does not take effect. Is there a way to fix this?

    Thank you

  • Profile Image
    owen
    Answered on December 06, 2016 at 09:20 AM

    Hi again,

    I can see the issue. The code seems to be overridden by some other codes that already exist. Please try the same code with a minor change this time:

    .form-line.form-line-column.form-col-2 {

        width : 200px !important;

    }

     

    .time-dropdown.form-dropdown {

        width : 55px !important;

    }

    This should do the trick. Let us know if the issue persists though.

    Thank you and sorry for the small mistake in my initial codes.