Como configurar o widget "Menu Suspenso do Usuário" para ficar igual ao elemento "Menu Suspenso"?

  • gruposoporhojena
    Perguntado em 20 de outubro de 2023 às 12:33

    Tenho um formulário que contém tanto o elemento "Menu Suspenso" quanto o widget "Menu Suspenso do Usuário". Como faço para configurar o widget para que fique com a mesma formatação (dimensão, cores, fonte, etc.) do elemento, de modo que fiquem visualmente semelhantes no formulário?

    Jotform Thread 8351033 Screenshot
  • Afzal Jotform Support
    Respondido em 20 de outubro de 2023 às 16:48

    Hi Gruposoporhojena,

    Thank you for reaching out to Jotform Support. I am currently using a translation to provide assistance, but if you want to get assistance in the Portuguese language, we can forward your request to our Portuguese Support Team, please note that it may take longer to receive a response.

    I understand you are looking to have the same design for the dropdown option in the User Contributed Dropdown widget. This can be done by adding custom CSS to your form. Check out the steps and screencast below to see how it's done:

    • Open your form in Form Builder and click on the blue Paint Roller icon on the right side of the screen.
    • Under the Styles tab, paste the code below into the Inject Custom CSS area.
    /*To set the iframe to full width - 8351033*/
    iframe {
        max-width: 410px !important;
    }

    The above CSS code will set the widgets to cover the full width. You only need to add the above CSS code for once for all the User Contributed Dropdown widgets. The next step would be adding the CSS code in the Custom CSS section of each User Contributed Dropdown widget. Check out the steps and screenshot below to see how to add the custom CSS to your widget:

    • Click on the Wand icon to open Widget Settings.
    • Open the Custom CSS tab and add the below code.
    /*To match the design of dropdown fields - 8351033*/
    select#user-option-list {
        height: 42px !important;
        width: 408px !important;
        color: #2462b9;
        border: 1px solid;
        font-size: 15.5px;
    }
    • Click on the Update button to save the changes.

    Configurable List Widget: Fit the field without scrollbar Image 1 Screenshot 30 Screenshot 20

    Here's what the result will look like:

    Como configurar o widget Menu Suspenso do Usuário para ficar igual ao elemento Menu Suspenso? Image 1 Screenshot 31

    Here's the cloned version of the form that you can test.

    Please give it a try and let us know how it goes.