I am trying to get the Kanban stack headers to remain in place when I scroll a single stack up.
I have set the stack overflow to scroll which works great for the individual stacks to scroll when needed. The issue is that the header scrolls off the screen instead of remaining in place and letting the stack items scroll up and under the header.
I have tried setting the position to sticky for the header container as well as the stack. Niether of these approaches worked.
Any ideas on how to make the kanban headers sticky?
To add some further details, it looks like there is a div that wraps the Kanban Header div. The wrapper div isn’t affected by changes to the styles for the header. I mention this because if you go into the Inspect window for Chrome and change the wrapper div’s “position” to “sticky” and add “top” and set it to 0 (along with setting a z-index) you can get the kanban stack to scroll under the kanban header. Regretablly there isn’t a way to make those changes for real through weweb, just in the Inspect window.
Sharing that tidbit and some screenshots in case there is a way to update the Kanban component to allow the position settings to be set on the correct div so they can impact the behaviour
Yeah actually, WeWeb has a lot of these wrappers, for example divs, instead of being a div, are div within a div, and this causes a lot of weird stuff going on, especially with sticky, or when you want to add some custom css, as you sometimes can’t hit the right div, or like, position absolute bugs out also.
I’ve reported this, but I failed to explain the usecases and didn’t have the time to follow up, so it just got lost. But yeah the HTML bloat that is generated is often an issue.
Good to know. Thanks! In the case of their kanban component, it looks like they could have the header, list, and footer at the same hierarchy and have the cards within the list and then you could manage the individual stacks/columns very well.
I think their main issue with the implementation of the kanban component is that they have the list tiems (cards) at the same level as the header and footer. They need to embed the cards in a “list” div so that the individual cards aren’t at the header and footer level of the hierarchy…Soooo close!!
if you add custom css globally you can target all the elements that you need. You have to set a class to a parent element and target any child by combining selectors. The only problem is that the element’s hierarchy is an internal implementation of weweb and it can change without notice so there is the possibility that at some point your selectors don’t work.
Yeah, that’s not even that sustainable honestly. And if you want to use this within components to package the css into the component itself, you just can’t.
You can do it in many ways: from the simple html element inside the component with your styles (I’m not a big fan of this option for many reasons), to styles dynamically generated through helper libraries (there are some very nice to play with, but of course it becomes yes-code and not with the best dx in the editor).
For components you have to think that they will always require some extra manual setup from the consumer (for example add this custom css to the header) and they can potentially interfere with each other. This is something that can happen with code as well.
I mean, you can scope your css, but I “hate” the idea of telling people to “set it up” themselves. Imo this should be as simple as adding a library. But yeah, for now pretty much impossible when CSS comes to the party.
