Adjust field width of Configurable List

  • Profile Image
    wkwan
    Asked on July 25, 2021 at 06:42 PM

    Can I adjust the width of the fields in the widget Configurable List?

    1627252925_60fde8bd574d6_

    For instance, I want to make the first field shorter and the second field wider.

  • Profile Image
    Niemi_Tommi
    Answered on July 25, 2021 at 07:44 PM

    Hi wkwan,

    Yes, it is possible to adjust the width of the Configurable List values by changing the CSS code, but I do feel that in your case the best option is to change type of the input field for Phase Number to be a number instead of the text. This automatically lets form fillers to only input numbers to the field and makes the field less width compared to Phase Name1627257192_60fdf96801a9b_ --> 1627256566_60fdf6f671d32_

    Best regards,

    Tommi

  • Profile Image
    wkwan
    Answered on July 25, 2021 at 07:49 PM

    Hi Tommi,

    That answers one part of the question. What about lengthening the "Phase Name" field? Some of the entries I expect would be long and it would be better to be able to show the user all of the text they have entered instead of needing to scroll.

    Also note sometimes my users need a period in the Phase Number, such as "63.02", so I must keep that field text instead of number.

  • Profile Image
    Niemi_Tommi
    Answered on July 25, 2021 at 08:04 PM

    Hi wkwan,

    Yes this is possible through changing styling values with Custom CSS. If you want to set Phase Name field input field to be for example 200 pixels instead of current 120px, you can add following code line to your custom CSS code.

    input[type=text] {    width: 200px;}

    1627257693_60fdfb5d81bac_changing-custom

    This code changes size of the all input fields which have type set to be text. In case you have more fields coming to your configurable list that contain text, please reply with your published Form to me so I can adjust the CSS styling to point only to Phase Name field. If the logic is same as in my form the correct code would be following:

    .col2 input[type=text] {    width: 200px;}

    Happy to help,

    Tommi

  • Profile Image
    wkwan
    Answered on July 26, 2021 at 12:36 AM

    Thank you