How to adjust the widths of fields?

  • tctrust
    Asked on December 11, 2016 at 6:47 PM

    After passing the fields from another form, decrease the size of text and date fields.

    How to adjust the widths of fields? Image 1 Screenshot 50

    How to adjust the widths of fields? Image 2 Screenshot 61

    How to adjust the widths of fields? Image 3 Screenshot 72

    How to adjust the widths of fields? Image 4 Screenshot 83

     

    Please check CSS of the form.

  • jonathan
    Replied on December 11, 2016 at 11:09 PM

    You can expand the TextArea field width by using CSS codes like this on your form https://form.jotformeu.com/61095828481362 

     

    #input_32 {

        max-width: 800px !important;

        width: 730px !important;

    }

    As for the DateTime field width, I noticed that it was just in shrink mode the reason it was not using the input max width. If you expand the field, it will auto size to the input width.

    Example:

    How to adjust the widths of fields? Image 1 Screenshot 20

    Hope this help. Let us know if you need further assistance.

     

     

     

  • tctrust
    Replied on December 12, 2016 at 8:23 AM

    How to adjust the widths of fields? Image 1 Screenshot 20

    So I had those fields of dates in the form of TEST.

    https://eu.jotform.com//?formID=63397067377368

    I not can expand those fields because I have that keep 2 columns and those fields not can weapon to another column.

    https://www.jotform.com/answers/1004833-2-column-layout-Aligning-the-form-fields#28

  • candy
    Replied on December 12, 2016 at 8:47 AM

    Hello,

    I have injected the following CSS codes in order to fix your form as the following screenshot below:

    #input_32 {

        max-width: 800px !important;

        width: 730px !important;

    }

    .form-sub-label-container{

    width:300px !important;

    }

    How to adjust the widths of fields? Image 1 Screenshot 20

    Please check and if you need further assistance, let us know.

    Thanks.

  • tctrust
    Replied on December 12, 2016 at 9:05 AM

     

    Thank you. But not is correct. the field of date that you've marked in frame Red must be in the column right.

    How to adjust the widths of fields? Image 1 Screenshot 30

     

    I attached the capture of the form of TEST. I need both the field of text how the field of date same as in the form of TEST.

    https://eu.jotform.com//?formID=63397067377368

     

    How to adjust the widths of fields? Image 2 Screenshot 41

  • Welvin Support Team Lead
    Replied on December 12, 2016 at 9:40 AM

    I've fixed it for you. Please check now. The custom CSS codes are the following:

    For the DateTime field:

    .form-sub-label-container {

        display: table-cell;

        width: 100% !important;

    }

    For the Textarea field:

    .form-textarea {

        max-width: 100% !important;

    }

    [data-type="control_textarea"] .form-input-wide {

        max-width: 100% !important;

    }

  • tctrust
    Replied on December 12, 2016 at 11:30 AM

    Many thanks to all.