Configurable List widget: How to make fields to have the same width using CSS?

  • Profile Image
    acct
    Asked on December 20, 2017 at 12:25 PM

    One more question please :  With the CSS, I can give a min-width to the column.

    However, is it possible to set the field in that colum to be the same width as the column?

  • Profile Image
    aubreybourke
    Answered on December 20, 2017 at 12:32 PM

    I need more information for your CSS:

    Do you mean this form: http://www.jotform.ca/form/73534308589264

    Or this form: http://www.jotform.ca/form/73534278389268

    Also please be more specific. Which field are you referring to? 

    Do you mean how to set the configurable list widget to display vertically?


  • Profile Image
    acct
    Answered on December 20, 2017 at 12:50 PM

    I am testing on the Cloned form http://www.jotform.ca/form/73534308589264

    The Configurable List widget section which is set with 4 colums:

    Prénom(s), Nom(s), Affiliation, Membre #

    I now know how to use the CSS Tab to set the Columns widths.

    However, the field to enter the information under the column header does not change to the same width as the column setting.

    Is there a coding in the CSS that can be use to also set the input field to the same width as the column width?


  • Profile Image
    Mike_G
    Answered on December 20, 2017 at 01:46 PM

    I have checked the Configurable List widget in the form you shared with us and I see that you have already added CSS codes to change the width and height of the textarea fields in the Nom(s) column and also increase the column width of the Prénom(s) and Nom(s) columns.

    May I suggest that you remove those CSS codes and add the following instead to the Custom CSS tab of the widget, please?

    textarea {

    height: 17px !important;

    }

    input, table textarea, table select {

       width: 150px !important;

    }

    I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.