Frontend issues

[amapaParticipant]

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,

[Ernest MarcinkoKeymaster]

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 :)

[amapaParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

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 :)

[amapaParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

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 :)

[amapaParticipant]

You cannot access this content.

[amapaParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

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 :)

[amapaParticipant]

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,

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts