Configurable list widget: Two column layout

  • entntstheatre
    Demandé le 19 juin 2023 à 12:23

    Bonjour,

    J'utilise le widget liste paramétrable, mais comment faire pour avoir juste 2 colonnes dans ce widget au lieu de 4?

    J'ai essayé d'intégrer une balise <br> ou <br/>, tant que je ne ferme pas la balise cela fonctionne (mais on ne voit pas la suite de mes champs), mais dès que je la ferme, cela ne fonctionne plus.

    le css column-width ne fonctionne pas non plus (ou alors je n'y associe pas le bon nom de ce widget).


    Merci pour votre aide


  • Victorino_S Jotform Support
    Répondu le 19 juin 2023 à 15:03

    Hi École,

    Thanks for reaching out to Jotform Support. Our French Support is currently unavailable; however, I will gladly assist you in English using a translation tool. If you prefer to receive assistance in your native language, please let us know, and we will forward your ticket to our French Support Team.

    As for your question, to clarify, are you referring to your form 231634520049046? If so, you can inject custom CSS into the Configurable List widget to achieve your requirements. Here's how to do it:

    • Select the Configurable List widget and click the Wand icon to open Widget Settings.
    • Go to the Custom CSS tab and replace it with the following CSS code:
    @media (min-width: 600px) {
       .configurable-list-field-wrapper {
          min-width: calc(50% - 8px);
       }
    }
    • Click the Update Widget to Save.

    Configurable list widget: Two column layout Image 1 Screenshot 20

    If that’s not exactly what you’re looking for, can you explain a bit more so I can help you better? 

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

  • entntstheatre
    Répondu le 20 juin 2023 à 10:41

    Hello,

    Thanks a lot, it's work perfectly!

    So when I want to have specific CSS, how can I know the right name of the widget ? (here: configurable-list-field-wrapper) is there a list somwhere?

  • Mary Jotform Support
    Répondu le 20 juin 2023 à 12:58

    Hello École,

    Thanks for getting back to us. Unfortunately, there is no specific list of CSS types or IDs for customizing the form. However, you may consider using the CSS editor from the Advanced Form Designer for customizing the forms with CSS code. Please take a look at the form designer page that helps in you in editing the CSS code.

    Configurable list widget: Two column layout Image 1 Screenshot 20

    If you want to add any CSS code to any of the widgets, you may find the classes/IDs used in the widget from the browser inspector section and add the CSS code to the Custom CSS section of the widget. You may find this article helpful in finding the CSS classes from the browser inspector.

    Let us know if you have any other questions.