Horizontal Box wider?

Hi,

Please send us a link to the page where you added the product filters from your screenshot, so we can help.

Is there an email address i can send it to? – the site is currently in development

Hi,

Yes, you can send it to info@themify.me , but please specify which issue we should check or send us a link to this thread.

I have the same issue. Even though I select horizontal it still comes up verticle. I believe it could be the size of the field. how can I fix this?

giftdshop.com.au/shop

Hi @neldigifix

Sorry, but I am not sure what is the issue on your site ( it is not the same issue as @ccip ), how I see your Filter is Horizontal as it is set: https://share.getcloudapp.com/llu92kRJ could you send us a screenshot and point out the issue on it?

Hi,
I have the exact same problem than ccip. You managed to solve it? Is there something i can do?

I created an horizontal filter only with category and tag dropdowns and i use it with Elementor. The tag filter is working correct, with the complete horizontal width (category filter width+tag filter width) but not the category filter. Check my screenshot, please:

https://share.getcloudapp.com/4gu2Ndg1

By the way, is there some way to increase the width for both dropdowns with css? As I only use two dropdowns the width is very small and does not look very nice.

Please, can you help me?

Thank you!

Hi again,

I just realized that this issue only happen on computer version. I checked on phone and it’s working fine. Already flushed all cache and the problem still appears.

Some idea?
Best regards.

Hi @elreddi

Please post a link to your website to the page where you added the Product Filter, so I can check.

Hello,

Thank you for your response. Here is the link The site is still under construction.

Thank you!

• This reply was modified 3 years, 10 months ago by elreddi.

Hi @elreddi

The width calculation of the fields are automatic, but in case you want them wider you can add this CSS to wp-admin > Appearance => Customize > Additional CSS:

.wpf_layout_horizontal .wpf_items_group.wpf_right_tab {
    left: -1px;
    right: auto;
    min-width: 170px !important;
}

On your site the dropdown should also drop to right, so the additional left: -1px; right: auto is needed, besides the min-width value, this may not be needed on websites where the filter doesn’t touch the edge of the screen.

Please let us know how it works for you.

Hello,

Thank you for your response. I added the code on Appearance => Customize > Additional CSS, but not worked for me. With the proposed code, the first tab still don’t drops to right but a bit to left, even there is no space. See screenshot

Seems the left: -1px; right: auto are not working, so i added !important to force these lines.

.wpf_layout_horizontal .wpf_items_group.wpf_right_tab {
    left: -1px !important;
    right: auto !important;
    min-width: 170px !important;
}

Looks better, but now both tabs drop only to right and not to left. You can check it in the site

Some idea?

• This reply was modified 3 years, 10 months ago by elreddi.
• This reply was modified 3 years, 10 months ago by elreddi.

Hi,

For me it appears like this: https://share.getcloudapp.com/NQuwAXQk the CSS is working now, if you still don’t see the dropdown drop to right, please clear your browser cache and see how it works then.

Hello,

Yes, but both dropdowns drop only to right. The first is correct, but the second one “capacidad” should drop also to left, as happen in the mobile version? See the screenshot However, in pc version, drops only to right. I don’t know if this can be corrected.

Anyway thank you for your help, looks much better even it drops only to right.

Hi @elreddi

Please replace the previous CSS with this so it will only apply to the Category Filter:

.wpf_layout_horizontal .wpf_item_wpf_cat .wpf_items_group.wpf_right_tab {
    left: -1px !important;
    right: auto !important;
    min-width: 170px !important;
}

Please let me know how it works.

Finally!!! Works perfect now. Thank you so much.

Best regards.