How to adjust the widths of fields?

  • Profile Image
    tctrust
    Asked on December 11, 2016 at 06:47 PM

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

     

    Please check CSS of the form.

  • Profile Image
    jonathan
    Answered 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:

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

     

     

     

  • Profile Image
    tctrust
    Answered on December 12, 2016 at 08:23 AM

    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

  • Profile Image
    candy
    Answered on December 12, 2016 at 08: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;

    }

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

    Thanks.

  • Profile Image
    tctrust
    Answered on December 12, 2016 at 09: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.

     

    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

     

  • Profile Image
    Welvin
    Answered on December 12, 2016 at 09: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;

    }

  • Profile Image
    tctrust
    Answered on December 12, 2016 at 11:30 AM

    Many thanks to all.