Is there any way to group/wrap multiple components into a “card” style container (div). Essentially, with Glide, if we have a tab/screen that contains multiple components (for instance, a Basic Table, a Rich Text, a Text, a Link, and a Switch component), and let’s say that those five components “go together”, instead of only being able to use empty spaces and/or line dividers to achieve a “grouped look”, is there a way (via Rich Text / CSS, perhaps) to wrap all five components into a single card style container (div). The CSS styling itself could be exactly like the card style that is already provided by Glide (for lists), in fact, that would be my preferred style as the look would be uniform throughout the app.
If there is not a Rich Text / CSS solution, is this something that Glide is considering to implement sometime soon?
From my understanding, the type of grouping you’re referring to is for items in a list. I’m talking about stylistically grouping multiple components into a single card view (div).
I’m talking about more than Glide Basic Table components. For instance, lets just say I have 5 random components on a screen. One is a Glide Basic Table, one is a Rich Text, one is a Text, one is a Link, and one is a Switch component. I want to wrap all those components into a single card style container (div).
I would have to see your app to make the right code… but what I sow in your screenshots… you can just make data into basic tables and target them as nth types… when you have elements between them… it will be complicated code
I appreciate the insight and code (which seems very helpful for single components), but like I mentioned, I’m trying to wrap multiple components into a single card styled container (div). Like in my reply above…
Is there any way to combine multiple :nth-of-type(num)s into a single div? Or does it not work that way?
Something like this, where I added (and :nth-of-type( 6 )), which doesn’t actually work, but I wanted to provide an example “pseudocode” of what I mean:
that is a complicated task… i would have to spend time on that… i never did that in Glide… but if you know the size of the elements and they are fixed… you can put a box background under… z-index:-1 with relative position minus the vertical size of that elements… then test it on different devices… and add transforming calculations
This is so close. For now, it’s working to “select” multiple components, unfortunately it makes the drop shadow appear after (at the bottom) of each component, instead of just at the bottom of the div as a whole. And then also, rounded edges would be nice (at least in my case). Now that you’ve provided a basis to work with, I’ll do some experimenting as well. But, thank you so much for putting in the time and providing the head start
Is it possible to make a div, that selects one :nth-child(num), then a separate div that selects another :nth-child(num), then a third div that wraps around those two divs, then just do the styling on the third div (to avoid those issues)?
