I need to increase the width of the form

  • Profile Image
    roffe
    Asked on November 02, 2017 at 06:42 AM

    Hi,


    I've used jotform to create a personality test form. So far things look nice. 

    There are two issues though. It seems I can't increase the width of the radio button field of the input table.  This is critical, I can't have the users scroll to get at the option they need.

    Ive tried using the advanced form designer, but invariably get the response "This form is not compatible with this designer".

  • Profile Image
    dreiquevada
    Answered on November 02, 2017 at 08:25 AM

    When you use the Spread the Columns option in JotForm, it applies a specific/fixed width to the radio elements. It causes overflowing in your table since it tries to fit the fixed width of each radio element to a single line. You can inject this CSS code to convert the width of each radio button to a percentage width.

    .form-radio-item{

    width: 14.28%;

    }

    14.28% is the result when you divide the 100% width of the container to 7 elements (since you have 7 radio buttons). This way, you can ensure it will not overflow inside the container. 

    1509625467Width.jpg

    You can check this link if you want to know how to inject CSS in JotForm.

     

  • Profile Image
    Welvin
    Answered on November 02, 2017 at 08:55 AM

    The form is using the new form layout. The width of the form is standard and there's no way you can change in the designer/advanced designer windows. But the width is responsive which means the form will auto adjust itself when viewed on mobile or small to medium screen devices. 

    If you want to adjust the width, you may consider using the old form layout. Go to Form Settings > Form Layout > All questions in one page:

  • Profile Image
    roffe
    Answered on November 03, 2017 at 06:03 PM

    Thanks, this works.  The multipage solution looks much nicer though – I hope it will be improved upon.