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:
- Make header and footer fixed using
position: absolute
- 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