# Group/Wrap multiple components into a single "card" style container (div)

**URL:** https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937
**Category:** Ask for Help
**Created:** [March 22, 2022, 7:11am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937 "2022-03-22T07:11:25Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![osxzxso](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/osxzxso/32/7356_2.png) [@osxzxso](https://community.glideapps.com/u/osxzxso)
#### Post date: [March 22, 2022, 7:11am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/1 "2022-03-22T07:11:26Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [March 22, 2022, 7:14am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/2 "2022-03-22T07:14:34Z")

</div>

i do not see the problem… Glide has grouping sorting… you can create very similar effect as on your images

---

<div class="post-metadata">

### Author: ![osxzxso](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/osxzxso/32/7356_2.png) [@osxzxso](https://community.glideapps.com/u/osxzxso)
#### Post date: [March 22, 2022, 7:18am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/3 "2022-03-22T07:18:22Z")

</div>

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).

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [March 22, 2022, 7:19am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/4 "2022-03-22T07:19:33Z")

</div>

you can create a table, and use CSS to shadow it… your example looks like Glide basic table

---

<div class="post-metadata">

### Author: ![osxzxso](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/osxzxso/32/7356_2.png) [@osxzxso](https://community.glideapps.com/u/osxzxso)
#### Post date: [March 22, 2022, 7:25am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/5 "2022-03-22T07:25:02Z")

</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).

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [March 22, 2022, 7:26am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/6 "2022-03-22T07:26:18Z")

</div>

yes, wrap it with div and shadow it

 ![Screen Shot 2022-03-22 at 4.03.38 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/d/2d6edd3bf28a98e4789fa105b0cbb15f95193669.jpeg)

play with parameters to get the desired effect…

```auto
<pre><span><style> 

div[id*='screenScrollView'] > div > :nth-of-type(10){ 
 background-color:yellow; border-radius: 10px;
margin-left:4%;
margin-right:4%;
filter: drop-shadow(rgba(2, 2, 2, .2) 5px 5px 7px); }

div[id*='screenScrollView'] > div > :nth-of-type(12){ 
 background-color:white; border-radius: 10px;
margin-left:4%;
margin-right:4%;
filter: drop-shadow(rgba(2, 2, 2, .2) 5px 5px 7px); }

```

---

<div class="post-metadata">

### Author: ![osxzxso](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/osxzxso/32/7356_2.png) [@osxzxso](https://community.glideapps.com/u/osxzxso)
#### Post date: [March 22, 2022, 8:12am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/7 "2022-03-22T08:12:54Z")

</div>

How would I combine :nth-of-type( 5 ) and :nth-of-type( 6 ) into one div?

Or in the example you provided, how would you combine :nth-of-type( 10 ) and :nth-of-type( 11 ) and :nth-of-type( 12 ) into a single div?

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [March 22, 2022, 8:19am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/8 "2022-03-22T08:19:13Z")

</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

---

<div class="post-metadata">

### Author: ![osxzxso](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/osxzxso/32/7356_2.png) [@osxzxso](https://community.glideapps.com/u/osxzxso)
#### Post date: [March 22, 2022, 8:47am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/9 "2022-03-22T08:47:45Z")

</div>

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…

> [@](#):
>
> For instance, let’s 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).

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:

```auto
<pre><span><style> 

div[id*='screenScrollView'] > div > :nth-of-type(5) and :nth-of-type(6){ 
 background-color:yellow; border-radius: 10px;
margin-left:4%;
margin-right:4%;
filter: drop-shadow(rgba(2, 2, 2, .2) 5px 5px 7px); }

```

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [March 22, 2022, 8:51am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/10 "2022-03-22T08:51:31Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [March 22, 2022, 9:33am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/11 "2022-03-22T09:33:11Z")

</div>

![Screen Shot 2022-03-22 at 5.41.17 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/c/dc4c4cb1e1d87657b09d4e6078f6ed8d4b455dfc.jpeg)

if I get motivated… I can make it better 😉

> **[StructureArt's App testing](https://sa-test2.glideapp.io/)**

---

<div class="post-metadata">

### Author: ![osxzxso](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/osxzxso/32/7356_2.png) [@osxzxso](https://community.glideapps.com/u/osxzxso)
#### Post date: [March 22, 2022, 9:56am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/12 "2022-03-22T09:56:34Z")

</div>

Can you share the Rich Text / CSS code that you used?

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [March 22, 2022, 10:09am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/13 "2022-03-22T10:09:48Z")

</div>

```auto
<pre><span><style> 

div[id*='screenScrollView'] > div > :nth-child(n+3):nth-child(-n+5){ 
 background-color:white; 
margin-left:4%;
margin-right:4%;
filter: drop-shadow(rgba(2, 2, 2, .2) 5px 5px 7px); }

```

create for each bulk

---

<div class="post-metadata">

### Author: ![osxzxso](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/osxzxso/32/7356_2.png) [@osxzxso](https://community.glideapps.com/u/osxzxso)
#### Post date: [March 22, 2022, 10:25am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/14 "2022-03-22T10:25:55Z")

</div>

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 🙂

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [March 22, 2022, 10:28am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/15 "2022-03-22T10:28:09Z")

</div>

just play with parameters… you will get there… adjust top shadow px… round corners will make elements looks separated… that’s why I did not use it

---

<div class="post-metadata">

### Author: ![osxzxso](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/osxzxso/32/7356_2.png) [@osxzxso](https://community.glideapps.com/u/osxzxso)
#### Post date: [March 22, 2022, 10:36am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/16 "2022-03-22T10:36:18Z")

</div>

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)?

---

<div class="post-metadata">

### Author: ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)
#### Post date: [March 22, 2022, 10:37am UTC](https://community.glideapps.com/t/group-wrap-multiple-components-into-a-single-card-style-container-div/39937/17 "2022-03-22T10:37:58Z")

</div>

hey… they do codes to make cars drive by themselves… lol everything is possible