[SOLVED] CSS variable changes with JS

Questions
1

Hello there,

I’m trying to chante a root css variable with js using the following line:

document.documentElement.style.setProperty(’–f7-panel-width’, ‘50px’);

It works OK but it’s leaving a gap between panels as per below:

image
image.png231×600 3.55 KB

How can fix that?

Thanks

2

--f7-panel-width is for setting panel width when it is supposed to be opened. Check the recipe source code, it has --panel-collapsed-size variable to specify panel width when it is closed

3

Hi @nolimits4web,

Thanks for the reply but what I’m trying to do is to toggle the panel.
Means, that if the resilution is above 1024px I would like to add a button to toggle the panel.

Any advice how to achieve that? I tried with the toggle method…

app.panel.toggle(“left”, “true”)

Thanks

4

Ok, so basically you trying to toggle on/off panel breakpoint. From what i see there is no API-way of doing it right. Will add it in next update.

Right now, yes, you need to change panel width CSS prop and call method to recalc View’s margin:

document.documentElement.style.setProperty(’–f7-panel-width’, ‘50px’);
app.panels.left.setBreakpoint(); // this will recalculate view's margin left
6

Amazing…

document.documentElement.style.setProperty(’–f7-panel-width’, ‘50px’);
app.panel.left.setBreakpoint(); // this will recalculate view’s margin left

Did the trick!

Thanks!

1 Like