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

    Can I change the width of input boxes on the Matrix Dynamique widget? Thanks

    Asked by JimMcL on November 10, 2014 at 10:35 AM
    matrix dynamique change width input width
  • Profile Image
    JotForm Support

    Answered by Welvin on November 10, 2014 at 11:28 AM

    Hi,

    Yes, using custom CSS codes that will be added to the custom CSS area of the widget. For example, if you need to change the width of the first box, simply inject the following custom CSS codes:

    input#input_c0 {width: 300px !important;}

    Change 300px to any size you want. I'm using this form from your account for example: http://www.jotformeu.com/form/43133612767353.

    Using Google Chrome's Inspect Element tool to find the ID of each input boxes:

    1. Right click to the input box

    2. Click "Inspect element"

    Let us know if you need any further assistance.

    Regards

  • Profile Image

    Answered by JimMcL on November 11, 2014 at 03:31 AM
    Hi
    Thank you but unfortunately, that has not worked.
    I tried doing it in the CSS editor on form designer and also through preferences. In preferences, I could not locate the correct line of code.
    In CSS editor, it had no effect.
    I tried clearing the Custom CSS box completely (as you have it). Didnt work.
    Can you tell me what I may be doing wrong please?
    Many thanks for your assistance.
    Jim
    ...
  • Profile Image
    JotForm Support

    Answered by Welvin on November 11, 2014 at 07:30 AM

    Hi Jim,

    You have to add the custom CSS codes to the widget Custom CSS area. The CSS area in the widget is different from the one in the form designer and form styles tab.

    1. Click on the widget and run the wizard by clicking the "wand" icon:

    2. In the widget wizard popup, navigate to the bottom part and insert the CSS codes in the Custom CSS area, please take a look at the following screenshot:

    Does it make sense now? Let us know if you need any further assistance.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by Welvin on November 11, 2014 at 07:33 AM

    And by the way, don't forget to append !important at the end of the custom CSS. 

    !important will give the targeted element precedence over any CSS styling that targets the same element in the form.

    Thank you!

  • Profile Image

    Answered by JimMcL on November 11, 2014 at 07:41 AM
    Doh! I realised this after sending the email.
    Thank you!
    Jim
    ...
  • Profile Image
    JotForm Support

    Answered by Welvin on November 11, 2014 at 09:11 AM

    That's great to know! Let us know if you need any further assistance.

    Thank you! ;)