Please help make date and time selectors appearance less wide in Configurable List

  • Profile Image
    BeTheChange_Conviventia
    Asked on June 25, 2020 at 07:25 PM

    Dear  Jotforms team, 


    I need the date picker and time selectors to appear less wide (and take up as little horizontal space as possible in the configurable list of the following form: https://www.jotform.com/build/201756867803060, i have read all the threads on adjusting the CSS for this purpose, but cant seem to get them to work. 

    Thank you in advance

  • Profile Image
    gerardw
    Answered on June 25, 2020 at 08:15 PM

    You can make the configurable list vertical so that all the fields appear correctly too.

    If that works for you, please insert this CSS code into the 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;}

    Related guide: How-to-Inject-CSS-Codes-to-Widgets 

    After that add the below code into the CSS section on the Form Designer section:

    iframe[src*="configurableList"] {width: 100% !important;}

    Related guide: How-to-Inject-Custom-CSS-Codes 

    RESULT:

    15931303692606_3.png

    Would this work out for you?

  • Profile Image
    BeTheChange_Conviventia
    Answered on June 25, 2020 at 09:28 PM
    Thank you for your prompt response! I think it works for now. Really
    appreciate!
    Jeisson Delgado
    *Coordinación de Voluntariado *
    Bogotá - Colombia
    *Conviventia*
    p: m: 305 7069775
    a: Carrera 9 # 1c-30
    w: www.conviventia.org



    El jue., 25 de jun. de 2020 a la(s) 19:15, Jotform (noreply@jotform.com)
    escribió:
    ...