Configurable List widget: Configurar los campos para que aparezcan en una sola fila

  • SoporteOperativo
    Fecha de consulta 1 de marzo de 2025, 20:40

    Buenas noches,

    Configuro el Widget Lista Configurable pero los campos no me salen en una sola fila

    Configurable List widget: Configurar los campos para que aparezcan en una sola fila Image 1 Screenshot 30

    Configurable List widget: Configurar los campos para que aparezcan en una sola fila Image 2 Screenshot 41

  • John Support Team Lead
    Fecha de respuesta 2 de marzo de 2025, 2:24

    Hi SoporteOperativo,

    Thanks for reaching out to Jotform Support. Our Spanish Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Spanish, let us know and we can have them do that. But, it might take a while until they're available again.

    Now, coming back to your question, I checked out the form and noticed that the Configurable List widget was set to show in a single row already. However, the specified width was set to only 200 pixels forcing the fields to show up in a column instead of a row. Let me show you how to fix it:

    1. In Form Builder, click on the Configurable List widget to select it.
    2. Next, click on the gear icon in the right to open the widget's properties.
    3. Under the General tab, look for the Width property and set it to at least 668 pixels.

    Configurable List widget: Configurar los campos para que aparezcan en una sola fila Image 1 Screenshot 20

    And that's it. The fields should now appear in a single row instead of a column. Here's a link to a cloned form for you to see how it looks after making those changes.

    Give it a try and let us know how it goes.

  • SoporteOperativo
    Fecha de respuesta 2 de marzo de 2025, 10:17

    HI John,


    How can I customize the width of each box. I want to reduce the width of IBS, DNI and Celular boxes and increase the box Nombre de Cliente


    Configurable List widget: Configurar los campos para que aparezcan en una sola fila Image 1 Screenshot 30

    Example

    Configurable List widget: Configurar los campos para que aparezcan en una sola fila Image 2 Screenshot 41

  • Reymae Jotform Support
    Fecha de respuesta 2 de marzo de 2025, 12:37

    Hi SoporteOperativo,

    It's really easy to adjust the width of each input box on your Configurable List by adding Custom CSS to your widget. Let me show you how:

    1. Copy the code below:
    .configurable-list-field-row {
    display: grid !important;
    grid-template-columns: 20% 40% 20% 20%;
    }
    .configurable-list-field-wrapper {
    min-width: unset !important;
    max-width: none !important;
    }

    2. In Form Builder, select your Configurable List and choose the Wand icon.

    3. Go to Custom CSS tab and paste the code.

    4. Click the Update button to save the changes.

    Configurable List widget: Configurar los campos para que aparezcan en una sola fila Image 1 Screenshot 20 Give it a try and reach out again if you have any other questions.

  • SoporteOperativo
    Fecha de respuesta 2 de marzo de 2025, 17:37

    Hi Reymae,

    How can I make that the field "Dia de Gira" does not allow to select days in the future, only present or past.

    How can I make that the field "Importe en S/" show numbers with "." for decimlas (only up to 2 decimlas) and "," for thousands (Example: 12,430.55)

    Configurable List widget: Configurar los campos para que aparezcan en una sola fila Image 1 Screenshot 20 Screenshot 10

  • Reymae Jotform Support
    Fecha de respuesta 2 de marzo de 2025, 18:14

    Hi SoporteOperativo,

    Just to avoid confusion, I've moved your questions to new threads and helped you there. You can check them out here:

    Let us know if you have any other questions.

Su respuesta