Configurable list widget - how to change label width and adjust text alignment of Save and Add button.

  • lritter
    Asked on February 6, 2020 at 1:15 PM

    How do I contain labels to the same width as text area in Configurable List Widget. 

    Also, how do I 'center' 'Save / Add' button. Notice the text is pushed to the right. 

    1581012914JotForm Screenshot 10

  • Ivaylo JotForm Support
    Replied on February 6, 2020 at 2:55 PM

    In order to fix the width of the labels, please try to inject the following CSS code in the Configurable List widget:

    #list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

    In order to inject the CSS code, you can follow this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    I have moved your second question to a separate thread here:

    https://www.jotform.com/answers/2151396-How-do-I-center-Save-Add-button

  • VincentJay
    Replied on February 7, 2020 at 12:18 PM

    Hi,

    Did you reply to this thread? Unfortunately, we didn't receive it properly. If not, please ignore this message. 

    Thank you.

  • lritter
    Replied on February 7, 2020 at 12:52 PM

    I tried to say 'Thank you' and the site kept telling me to slow down...LOL. Nothing needed. Thanks for checking with me!