Need to make drop down buttons in grid filters consistent.

http://freshfields.promoting-u.co.uk/freshfields-residents/

Hi, I need to make the drop down buttons (see screen grab) consistent on the above page. Currently they are inconsistent and follow the width of the line of txt inside the buttons. I would like to make them all drop down the same width with the txt inside the buttons centred and the background white losenge keeping the same width to contain the buttons inside (please refer to my doodles in red on the screen grab).

Also it would be great that when the user has clicked on an option inside a filter and selected it it doesn't stay selected when the other option is selected. So in simple terms...

Click 'A' to select 'A'
Decide to click 'B' ..... when 'B' is clicked Button 'A' automatically deselects and turns back to Grey.

Currently 'A' needs to be clicked again to deselect. This is counter intuitive for a user who doesn't know the software.

Your great help is much appreciated and I would make the client extremely happy if you guys can solve this one for me.

:slight_smile:

  • Predrag Dubajic

    Hey Studio3creative,

    Hope you're having a nice weekend :slight_smile:

    You can use this CSS code to style your dropdowns in desired way:

    .esg-dropdown-wrapper {
        width: 110px;
    }
    
    #content .flat-dark .esg-filterbutton {
        width: 100%;
        text-align: center;
        padding: 0!important;
    }

    I usually try to avoid using !important in CSS but since padding in theme/plugin is already given !important there was no other way to go around it.

    If your theme doesn't have custom CSS field, then you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Also it would be great that when the user has clicked on an option inside a filter and selected it it doesn't stay selected when the other option is selected. So in simple terms...

    Filters are usually made in a way where one is selected the other one gets deselected so it seems this was designed to work this way by theme/plugin developers and changing it would require some additional coding, probably with jQuery.

    This goes bit beyond the support we offer here since it was not coded by us and would require quite some time going through other people code to understand how it works.
    You should get in touch with the theme/plugin developer that made this and they should be able to give you solution quickly enough.

    You can also post a job in our job board where you can hire a developer to assist further:
    https://premium.wpmudev.org/wpmu-jobs/
    Please note that, no WPMU official staff members are allowed to work in the job board.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.