Styling drop-down not possible

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Styling drop-down not possible

This topic contains 5 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 1 year ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #41771
    Uli Niklaus
    Uli Niklaus
    Participant

    Hello!

    Unfortunally the support Ticket-System doesn\’t work, so i write you here..

    I bought the \”Ajax Search Pro\” and have following problem:

    How I can change the background of the dropdown menu in the \”Ajax search pro\”? There is one point in the settings for the Dropdown, but it is ultimately ignored by the mobile phone (iphone) and desktop browser (Mac – firefox/Chrome). Tried to help with CSS but no matter how, this slightly transparent blur background always remains.
    Is it a bug? Or is the Dropdown style provided from a local browser/computer?

    Divi theme is in use.

    The page is currently in maintenance mode, so no link, but i can provide Screenshots.

    I hope you can help me!
    Thanks!

    Kind regards
    Uli Niklaus

    Attachments:
    You must be logged in to view attached files.
    #41786
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    Thank you very much for the details!

    Well, it highly depends on the browser and device. Some devices allow more customization, so less, some does not allow anything. Apple devices are especially very problematic, they rarely respect any customization whatsoever.
    Usually Windows/Linux Chrome is the most customizable one, and Safari is the least allowing (in my experience).

    Are these post type, taxonomy or custom field filters? I’m asking because there is a different drop-down layout, which may work better cross devices and has more room for styling.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #41788
    Uli Niklaus
    Uli Niklaus
    Participant

    Thanks for replying!

    These are taxonomy..

    I tried to find it in the plug-in css files, but had no luck..

    #41809
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Okay!

    Usually overriding with custom CSS is the best way to go, modifying the original CSS files is not going to help, as those are generated dynamically when you change the plugin options.

    For taxonomy terms, you should try using the drop-down with search variation: https://i.imgur.com/WAv2VGU.png

    That is a custom made script for the drop-downs, and it has a very similar layout for all devices.

    Styling it is not easy, but possible via custom CSS:

    /* The Container */
    .asp_select2-selection,
    span[class*=asp_select2-selection],
    .asp_select2-search__field,
    .asp_select2-search__field::placeholder {
        background: red !important;
        color: white !important;
    }
    
    /* The selection */
    .asp_s span.asp_select2-container--flat ul li.asp_select2-selection__choice,
    .asp_sb span.asp_select2-container--flat ul li.asp_select2-selection__choice {
        color: white;
        background-color: #ff7272 !important;
        border: 1px solid #ff7272 !important;
    }
    
    /* Drop down general */
    span.asp_select2-container--open .asp_select2-dropdown--below,
    span.asp_select2-container--open .asp_select2-dropdown--above {
        background: #9c6a6a;
        color:#fff;
    }
    
    /* Drop down selected values */
    span.asp_select2-container--flat .asp_select2-results__option[aria-selected=true] {
        background: #b34949;
        color: #fff;
    }
    
    /* Drop down hovered selection */
    span.asp_select2-container--flat .asp_select2-results__option--highlighted[aria-selected] {
        background: #dc3737 !important;
        color: #fff;
    } 
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #41871
    Uli Niklaus
    Uli Niklaus
    Participant

    Thanks! I Think that could work.
    BUT unfortunally, when i make the setting for the dropdown with search, i’m not able to use the dropdown menu.
    I click and it dissapears at the same moment.. normal dropdown works.
    please check the video.. any idea?

    Attachments:
    You must be logged in to view attached files.
    #41880
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    It looks like either a 3rd party script conflict for the mouse hover events or some sort of a misalignment via styling.
    I will have to take a look at the issue directly to be able to tell.

    Can you please share a URL where I can see this? I don’t think I need server access for now.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.