Frontend issues

This topic contains 10 replies, has 2 voices, and was last updated by

 
Keymaster
3 years, 11 months ago.

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

    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

    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

    Participant
    You cannot access this content.
    #16688

    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

    Participant
    You cannot access this content.
    #16691

    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

    Participant
    You cannot access this content.
    #16695

    Participant
    You cannot access this content.
    #16705

    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

    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
    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.