Frontend issues

This topic contains 10 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 4 years, 6 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #16679
    amapa
    amapa
    Participant

    Hello Support Team,

    I’m creating a search instance including a filter using two custom fields (dropdown selection). The filter in itself works great but I can’t achieve the layout I’m aiming for.

    Basically, I would like the filter and input field to be 50%/50% on the same line without space between them.

    I tried everything I could think of using the custom shortcode position, block settings position, and/or custom CSS but could not get what I wanted.

    I also have a problem with the placeholder of the dropdown not displaying (it shows the 1st option instead).

    You can find the search instance on : Pages > test-asp.

    Hopefully we can work together to reach the desired layout 🙂

    Kind regards,

    #16685
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    Thank you for the proper details, it helps me a lot!

    However I cannot access the site, it prompts me a password to enter first. Can you please check that? Thanks!

    Best,
    Ernest Marcinko

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


    #16687
    amapa
    amapa
    Participant
    You cannot access this content.
    #16688
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Thanks, that works now!

    Please note that I can’t promise an exact working solution for all cases, as this partially falls under the customization request category, but I will do my best to help you.

    I assumed that I can make changes to that test page, so I did 2 things:

    1. I have changed the shortcode you are using for the search, the width of the settings box was changed to 20% and the search to 30%, you can change that of course:

    [wd_asp elements='settings,search' ratio='20%,30%' id=1]

    2. I have added this custom CSS code to the search settings, to force the centering of the elements, as well as a forced size on the settings form, and to make it float closer to the search bar: https://i.imgur.com/CCUjki0.png

    .asp_sb form {
        width: 200px;
        float: right;
    }
    .asp_shortcodes_container {
         justify-content: center !important;
    }

    And that’s it basically. Now, it looks like this, centered and positioned next to each other: https://i.imgur.com/YNRFj04.png

    I hope this helps!

    Best,
    Ernest Marcinko

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


    #16689
    amapa
    amapa
    Participant
    You cannot access this content.
    #16691
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Thank you for your kind words 🙂

    1. I think so, this custom CSS should help you out:

    div.asp_sb.searchsettings form fieldset.asp_custom_f {
        margin-top: 0 !important;
    }
    .asp_custom_f .chosen-container .chosen-single {
        line-height: 44px !important;
        min-height: 55px !important;
    }

    It should look like this afterwards: https://i.imgur.com/T0NxIKZ.png
    You might have to adjust it here and there, but it should be a good start.

    2. Yes, by adding this empty option line to the field like so: https://i.imgur.com/2uSvNbq.png

    It’s a fairly new feature, it is yet missing from the documentation, sorry about that.

    I hope this helps!

    Best,
    Ernest Marcinko

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


    #16693
    amapa
    amapa
    Participant
    You cannot access this content.
    #16695
    amapa
    amapa
    Participant
    You cannot access this content.
    #16705
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    To add some responsiveness, maybe setting a minimum width of 210px on the first element, and 320px on the search container will do the trick:

    
    .asp_shortcodes_container .asp_shortcode_column {
        min-width: 320px !important;
    }
    
    .asp_shortcodes_container .asp_shortcode_column:first-child {
        min-width: 210px !important;
    }

    You might have to adjust these values, but currently it will look like this on small screens: https://i.imgur.com/YOk273k.png

    The non-searchable element is just a simple select, but there are some custom CSS rules inherited from the theme, that override the default layout. If you decide to use that, then this should make it look similar to the searchable:

    select.asp_nochosen {
        line-height: 44px !important;
        min-height: 55px !important;
        min-width: 195px !important;
        width: 195px !important;
        background: #f6f6f6 !important;
        appearance: menulist !important;
        -webkit-appearance: menulist !important;
    }
    Best,
    Ernest Marcinko

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


    #16706
    amapa
    amapa
    Participant

    Hello,

    Indeed, it seems to do the trick 🙂

    Thank you so much for your help!

    That’s a 5/5 stars support, I’ll make sure to give you a top notch review on Envato.

    Kind regards,

    #16709
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

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


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

You must be logged in to reply to this topic.