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

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

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:

Would this work out for you?

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ó:
...