[Resolved] GP breaking the design of Documents BSF plugin

[Adrien]

Hi,

GP breaking the design of Documents BSF plugin (https://wordpress.org/plugins/bsf-docs/)

Please see the bug here:
> https://www.awesomescreenshot.com/image/13038467?key=9ee1b7cb125e7a23cc56392b0b5ae9fd

Please see below how this should look:
> https://www.awesomescreenshot.com/image/13038532?key=fc72030a6411d6451ba9cf2f0d69f06e

I have done a complete debug. There are no plugin conflicts, cache is disabled, there are no issues with elements or css.

Thank you very much for your help. Kind regards, Adrien

[Ying]

Hi Adrien,

Try add this CSS:

div#content {
    flex-wrap: wrap;
}
div#bsf-live-search {
    width: 100%;
}

Let me know if this helps 🙂

[Adrien]

Thank you very much! This solved my issue. Appreciate your help.

[Ying]

No problem 🙂

[Adrien]

Hello, I’m reopening this ticket because the code above does not work anymore.

When Im trying to use BSF plugin for documentation everything is upside down. I had the same issue with another KB plugin.

Could you help? I have enclosed my page URL. Thanks a lot for your help.

PS: The search bar should be horizontal.

[Adrien]

Here are two screenshots.

Default 2023 WP theme:
https://pasteboard.co/3aiuuXoJLbQt.jpg

GeneratePress:
https://pasteboard.co/tzROk97nz8ys.jpg

[Adrien]

Just made this quick video to show you: https://www.awesomescreenshot.com/video/15790751?key=9ae1df0bc2f037b61f49978c5a87e095

[David]

Hi there,

try adding this CSS:

body[class*="docs"] #content {
    flex-wrap: wrap;
}

body[class*="docs"] #content > div {
    width: 100%;
}

[Adrien]

Hello David! You’re code is a great improvement thank you.
However, as you can see now and on the enclosed screenshot, this right side bar can be removed with a layout element and on mobile the right side column is pushing all screen to the right side with a big gap.

https://pasteboard.co/FCs3OFuUEQ8G.jpg

Thanks for your help.

[David]

That wrapper they add around the content is a pain.
Try adding this CSS to fix that :

.docs-wraper {
    display: flex;
    flex-wrap: wrap;
}

[Adrien]

It didn’t work. It looks like the Element layout >> sidebar/content (Left sidebar) does not show.
Instead, it’s replaced with the right sidebar and its widgets.
I’ve already debugged but couldn’t find any conflict anywhere and my debug.log is empty. Im on PHP 7.4.

[Adrien]

Add-on: David if you see the search bar container with grey background, it’s supposed to be full width. Maybe it’s related to the issue with the sidebar.

Solved.

[David]

So is it ALL good ?

[Adrien]

Not at all 😉
Looks, it’s what im trying to explain:

https://pasteboard.co/6iYRXrTJMSwl.jpg

My layout element is set to >> sidebar/content.

Here my left sidebar don’t show at all and is replaced by the right sidebar with its respective widgets.

I’m sorry for the headache.

[David]

No problems 🙂
What is the display rules you have for your Layout Element ?

[Author]

Posts