Comment modifier le css du widget "liste paramétrable"?

  • S_diMeo
    Demandé le 17 mai 2021 à 10:42

    Bonjour.

    J'ai utilisé le widget "liste paramétrable" dans un formulaire. J'aimerais que les champs ne se visualisent pas les uns à côté des autres mais l'un sous l'autre (retour à la ligne). Comment puis-je y arriver?

    Autre question: mon formulaire utilise aussi le widget "matrice dynamique". J'ai réussi à faire en sorte que les champs soient les uns sous les autres dans le formulaire. Par contre, je ne sais pas comment faire pour le pdf de réception des informations.

    Ceci dit, si vous connaissez un autre widget qui permettrait de multiplier les réponses (ajouter les champs autant de fois que le répondant le souhaite), je peux encore changer mon questionnaire. :-)

    Merci d'avance de votre aide.

    S

    Jotform Thread 3102655 Screenshot
  • Gaetan_B
    Répondu le 17 mai 2021 à 13:44

    Bonjour,

    Merci de nous avoir contactés.


    Pourriez-vous copier le code suivant dans le widget? (Custom CSS):

        #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;
        }


    Pour ajouter des champs de la manière dont vous l'indiquez, il faudra faire appel à la logique conditionnelle je pense. Mais tout dépends du type de champs que vous souhaitez ajouter.


    En espérant que cela vous aide.

    N'hésitez pas à nous recontacter si vous avez besoin d'assistance supplémentaire.

  • S_diMeo
    Répondu le 18 mai 2021 à 08:08

    Ca fonctionne. Un énorme merci. :-)