[Resolved] Sidebar on mobile by click

[David]

Updated the changed CSS here to include the Select field:

https://generatepress.com/forums/topic/sidebar-on-mobile-by-click/#post-1513282

[roadlink]

Hi David,

Really appreciated for you time.

But the issue is still there. https://prnt.sc/vcj3rg

1. Attribute name is not shown fully.
2. Values can’t be seen or select.

[David]

The widget has inline styling that is limiting it to 100px.
Try this CSS to overcome that:

.woocommerce-widget-layered-nav .select2-container--default .select2-search--inline .select2-search__field {
    width: unset !important;
}

[roadlink]

Hello David,

Yes, this solve the #1.
But still there is no attribute in there. This is weird.

[Tom]

Hi there,

Does this CSS help?:

.select2-container--open {
    z-index: 999999;
}

[roadlink]

Hi Tom,

Yes, It works.

Thanks

[Tom]

No problem!

[roadlink]

Hey there,
I just realized that when we choose an attribute, it moves count in second line.

https://prnt.sc/vjj1tt

Here is the CSS I am using.

.slideout-widget.woocommerce ul li:not(.chosen):not(.select2-search) {
    line-height: 2em;
    display: grid;
    grid-template-columns: 0 90% 10%;
}
.slideout-navigation .slideout-widget ul.product-categories li {
    grid-template-columns: 90% 10%;
}

.slideout-widget {
    border-top: 1px solid #ccc;
    padding-top: 1em;
}

[Tom]

Try adding this:

.slideout-navigation .woocommerce-widget-layered-nav-list__item a {
    display: inline-block;
}

[roadlink]

thx Tom, solved like this https://prnt.sc/vkv1am

[Tom]

Awesome 🙂

[Author]

Posts