Styles Logic for UI builder

Hi I have a sidebar with my styles in a CSS extension.
I have added styles logic to the sidebar to respond to App data properties.
But when I return the styles in the Styles Logic, I find it returns just the one style changed in the logic.


So when the styles logic is applied I get only one style back.
Specifically, it returns the width but not the other styles in my extension.

How can I implement the styles logic to return all the styles in the extension.

Let’s work backwards and define what the end result should be (not in technical or backendless terms). What do you need to happen?

Hi @mark-piller ,
I reimagined my sidebar so it’s all good right now.

It shows when open.
When closed I leave the icons and visitors can see the navigation on hover with tooltips.

I wanted some help understanding how the page is set up by default in the SDK because I’m trying to have the header stick to the top and the footer to the bottom while the scroll is just for the main area content. Currently, if a visitor scrolls the header will disappear from view and on page enter, because of the length of the content the footer will disappear from view. See below.

Ideally, the header, and footer should be visible at all times.
Please advise.

Hello @Breldan_Muthaka

I should make some remarks to your code:

In all ... Logic handlers we are not setting any values, we just return some result of calculations.

So when the styles logic is applied I get only one style back.
Specifically, it returns the width but not the other styles in my extension.

And it’s correct. Style of block works only with dynamic styles which defined via logic.
You don’t need to return here “static” styles, because components merge them with dynamic styles by themselves.

As for your last question, there are different ways to solve it:

  1. Make header and footer fixed using position: absolute
  2. Make the root element height: 100vh, and split the content into 3 part: header, content, and footer. And make content scrollable.

I will advise you to try to find some tutorials “how to implement sticky header”, I believe it will be more informative and clear than my instruction.

Regards, Dima

1 Like

Excellent,

I’ve used a root element and it’s worked great. All the elements appear from the top and persist when scrolling to the bottom.