Services Plugins FAQs

CSS Tools Plugin

Plugins
#1

Hi there,

I was having a look at the CSS Tools Plugin which looks very powerful. I was wondering if there was a way of creating a side-bar for a web application which would change width depending if its open or closed. And if it was possible to resize the other groups on the page to fit the new width.

For example: my screen width is 900px in total. The side-bar is 300px in width and the rest of the groups occupy the remaining width(600px).
The side-bar would have a button to reduce its size to say 150px in width. Now the groups on the page would have more room to expand and they would go up to 750px in width to occupy all the space on the page.

Is this something achievable?

Thank you

#2

Hello @ljf, thank you for reaching out.

CSS Tools Plugin can help you to make your UI/UX more accurately as well.

But your needs can be implemented by Bubble functions:

You need to create reusable element for side-bar group and add conditional for width. Create a “hide” button and do the hiding using workflow & conditionals.

And then you can use CSS Tools Plugin to set additional styles for main page groups and ect…

Hope it will help.

Regards ! Zeroqode team.

#3

Hi @pavel,

Thank you for your response. Yes, I have created the reusable elements and various groups in Bubble but I do not how to use the CSS Tool Plugin to resize the different groups. Could you give me any tips?

Thank you

#4

Hello @ljf, thank you for reaching out.

Did you had chance to check our demo with editor mode ? There are demo with different elements and groups.

Hope it will help a lot.

Regards! Zeroqode team

#5

Hi @pavel,

Yes, I had a look at it but I did not really get the grasp of it. I was hoping that you could help me understand how it works.

Thank you

#6

Hi @pavel,

I have a question very similar to the one asked by @ljf.

I need to change the size of elements, when an element is clicked and then come back to the initial size when another element is clicked. So, I don’t want the element to retract/expand over time but I want the effect to be triggered on click (without the time dependence).

I tried to apply the feature with the help of your demo, but I didn’t manage to adapt it to my case: I have a few groups inside one main group and I want to change all the groups height at the same time when an icon is clicked but the result is that only the main group height changes.

Here is a link:

Thank you!

#7

maybe you could try to experiment with the order of changing the size actions? First change the size of the smaller groups inside, then the bigger ones etc. Maybe that will help
if not, i’m afraid we don’t have a quick solution to this