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.
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:
position: absoluteI 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
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.
Good Day All,
I am trying to achieve something similar to the above post, I am trying to render the background colour of dynamic list items depending on the “Status” of the item.
Assistance would be appreciated,
Kind Regards,
Raymond
Hi @Raymond_Woodley ,
I would add a CSS class to the Load_Repeater Data Item
for example
loaded: { background: '#yourcolor'; }
Then on the specific item, use class list logic. as follows
Because this post led me astray in how to use the Styles Logic, I thought I would at show the correct usage. This does not alter the solution.
Altering styles using the “Style of” block and then returning that block as depicted below can cause recursive calls, and many re-renders, leading to react errors and sluggishness:
Instead, return an object with the desired style attributes:
