Customize the Dynamic Dropdown Widget to fit on my form style

  • Profile Image
    leadershipdevelopment
    Asked on March 07, 2018 at 06:25 PM

    I would like to use this widget, but how do I make it the same font size as the rest of the form? The font inside the dropdown is too big, a different font and much bigger than the other fields.

    Thank you. 

  • Profile Image
    EltonCris
    Answered on March 07, 2018 at 07:46 PM

    Inject this CSS codes in the Dynamic Dropdown Widget to shrink its font size as well as the dropdowns.

    .select2-container--default .select2-selection--single .select2-selection__rendered {

        line-height: inherit !important;

        font-size: 12px !important;

        padding: 4px !important;

        top: 26px !important;

    }

    .select2-results__options li {

        line-height: inherit !important;

        font-size: 12px !important;

        padding: 4px !important;

    }

    .select2-search__field {

        padding: 4px !important;

    }

    .select2-container--default .select2-selection--single {

        border-radius: 0;

    }

    Inject this in the Dynamic Dropdown Widget settings under Custom CSS tab.

    Result: