# CSS Trick: Inset Switch Components for Grouping

**URL:** <https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134>\
**Category:** Community Resources\
**Created:** [November 27, 2021, 7:20am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134 "2021-11-27T07:20:50Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [November 27, 2021, 7:20am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/1 "2021-11-27T07:20:50Z")

</div>

Here is a very simple one…

I had a screen with a bunch of switch components, in groups:

 ![Screen Shot 2021-11-27 at 3.16.04 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/2/8259bf270619f93cea3c66f7dbf2ef801008dd61.png)

By applying a bit of CSS, I was able to inset them slightly to make the grouping more obvious:

```auto
<pre><span><style>
[data-test="app-switch-view"] {
  padding: 5px 30px;
}

```

 ![Screen Shot 2021-11-27 at 3.16.26 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/1/a191305cc7bb3ff4a9be12df5dd5e4a55434efec.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [November 27, 2021, 7:51am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/2 "2021-11-27T07:51:36Z")

</div>

That looks very nice! Thanks for sharing.

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [November 27, 2021, 9:02am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/3 "2021-11-27T09:02:40Z")

</div>

Hi, Darren 🙂. My 2 cents.  
Maybe if you alternate sections backgrounds (just light silver/white/silver/white, nothing foolish), it would be easier to distinguish them (where a section begins and ends) and create a reading rythm, less monotonous.

Maybe with alternate soft BCG, you no longer need hard separators that strikes through the screen and actually lay more stress on the lines than the contents.  
Personal style of course 🙂

Whenever I present tables, or organise form fields in tables, I personally always change the default black “violent” borders, as they are not the main interest, but the cells contents. To almost transparency, as you’ll always know where the borders are, needless to insist heavily on the frame, but rather on the subject that matters.

Edit : besides, is it possible to display the switches in 3 columns and 1 row only?  
It’s short enough in English.  
This would avoid scroll and as the switches are repetitive, compact the layout to compensate.

Maybe you can reorganise the switch so as not to repeat the 3 words Create, Read and Update. Like switches inside a table where the Create, Read, Updates are 3 column titles effect. And the User Targets as row titles. Like a questionnaire with Checkboxes and not a single word repeated for better readability.

Do you really have to repeat the word “Admin” in “Admin permissions”? As the screen already filters on “Admin”, or?

if you repeat words, that can “hide” what really matters: the preferences switches.  
And occupy a lot of layout especially for bold titles.

---

<div class="post-metadata">

**Author:** ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)\
**Post date:** [November 27, 2021, 9:21am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/4 "2021-11-27T09:21:27Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/5/c58bf4f6bd527366a2fe33184159a0321fab994a.jpeg)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [November 27, 2021, 9:32am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/5 "2021-11-27T09:32:03Z")

</div>

wow, that’s a lot of feedback.  
I appreciate the fact that you took the time to think about that and share your thoughts. Thank you.

Only thing is, I wasn’t actually looking for any feedback. What you see there is hardly a finished version of that particular screen. All I was doing was sharing a little CSS trick. No more, no less 😉

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [November 27, 2021, 9:36am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/6 "2021-11-27T09:36:53Z")

</div>

Yes, Darren, I somehow guessed that way, too 😉 sorry for the trolling.  
But you helped me think about what I could consider later, so thanks for that.  
1 stone 2 targets 🎯 (don’t shoot the birds, I’m not a hunter).  
I know there are limits in tables and switches layout, but you never know, maybe some CSS Experts can manage to reorganize to optimize.

Kind of stuck at this stage

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/0/b05e58c57591e6c1c4d72b56dcab49d88d8ded4f.png)  
If you have a way to show 3 swiches in a row and make them align with Create - Read - Edit, this would be nice, IMHO.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [November 27, 2021, 9:52am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/7 "2021-11-27T09:52:51Z")

</div>

Yes, agreed. That would be very cool.  
I’ve seen that done with choice components, but not with switches. But I imagine it should be possible…

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [November 27, 2021, 9:54am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/8 "2021-11-27T09:54:29Z")

</div>

> [@Darren\_Murphy](#):
>
> ```auto
> <pre><span><style>
> [data-test="app-switch-view"] {
> padding: 5px 30px;
> }
> 
> ```

With your CSS

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/8/387808142a80a6941fcce9d20cbff1bd333ff336.png)  
Lesson’s learned 😁

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [November 27, 2021, 9:57am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/9 "2021-11-27T09:57:11Z")

</div>

Oh, it’s possible with choice components? And checkboxes? Do you happen to remember where the tricks are?

---

<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:** [November 27, 2021, 10:11am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/10 "2021-11-27T10:11:52Z")

</div>

like that? [SAMPLE](https://sa-test-app.glideapp.io/dl/ewAiAHQAIgA6ADcALAAiAHMAIgA6ACIAbQBlAG4AdQAtADQANQBhADAAOAA4ADIAYwAtAGQAMAA1AGQALQA0AGIANwAzAC0AYgA5AGQANQAtAGMAOAAwADMAYQAwADIAOQA1AGIANgBmAC0AYwA0AGMAYQA0ADIAMwA4AGEAMABiADkAMgAzADgAMgAwAGQAYwBjADUAMAA5AGEANgBmADcANQA4ADQAOQBiACIALAAiAHIAIgA6ACIATgBGADYAZABTAHcAZwBTAFEAegBTAE4AcAByADgAUQBUADAAOAA3AHoAdwAiACwAIgBuACIAOgAiADYANAB4ACIAfQA%3D)

 ![Screen Shot 2021-11-27 at 5.08.59 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/c/ecba3a151d2452483f5f5ded93ddc96da78a9f2f.jpeg)

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [November 27, 2021, 10:22am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/11 "2021-11-27T10:22:43Z")

</div>

Can the S1 to S3 be above the switches, so as not to repeat the titles for each row of 3 switches?

---

<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:** [November 27, 2021, 10:56am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/12 "2021-11-27T10:56:56Z")

</div>

you can put css text anywhere you want, and take out switches titles

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [November 27, 2021, 11:04am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/13 "2021-11-27T11:04:01Z")

</div>

Thks, Uzo, you’re a boss ✔  
With what component if any you created the date number boxes? Buttons you CSS to organize them in rows and columns?

---

<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:** [November 27, 2021, 11:05am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/14 "2021-11-27T11:05:04Z")

</div>

date numbers? Do you mean an 8x8 grid?

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [November 27, 2021, 11:05am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/15 "2021-11-27T11:05:25Z")

</div>

Yes I do.

---

<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:** [November 27, 2021, 11:07am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/16 "2021-11-27T11:07:11Z")

</div>

this is an inline list cards view… it is in [Code BOOK](https://code-book.glideapp.io/) I just modify a little…

```auto
<table style="table-layout: fixed;
width: calc(110% - 40px);
margin-top:-30px;
text-align:left;
font-size:12px;
color:grey;
-ms-transform: translate(50%, 0%);
transform: translate(1%, 0%);
">

<pre><span><style>

/* Rich Text */
[data-test="app-markdown-view"] {
height:0px;
}

/* All Card */
[data-test="app-horizontal-list"] {
margin-top:-0px;
}

/* Horizontal List x 7 */
[data-test=app-horizontal-list] .inner {
grid-template-columns: repeat(8, 48%) !important;
column-gap: 9px !important;
row-gap:9px;
width: 27%;
padding:3px 10px 9px 18px !important;
}

/* Image */
.card-image-container {
height:50px;
opacity: 0.5;
}

/* All Item */
[data-test="app-horizontal-list"] .card-title-container {
margin-bottom: -6px !important;
margin-top: 15px !important; 
margin-bottom:-9px !important;
}

/* Avatar, Avatar Text, Caption */
[data-test="app-horizontal-list"] .bottom-area {
padding: 0px 0px !important;
margin-top:-1px;

z-index:1;
}

/* Header */
[data-test="app-horizontal-list"] .card-header{
text-align:center;
color:#B0B0B0 !important;
margin-top:-58px;
cursor: pointer;
/border-bottom: 1px ridge rgb(120, 120, 120, .4);
}

/* Title */
[data-test="app-horizontal-list"] .card-title {
text-align: center;
margin-top:-60px;
/border-bottom: 1px ridge rgb(120, 120, 120, .4);
}

```

---

<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:** [November 27, 2021, 11:15am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/17 "2021-11-27T11:15:49Z")

</div>

and this is for 3 switches in a row:

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

div[id*='screenScrollView'] >div>:nth-child(3) {
margin-left:-0px;
width:33%;

}
div[id*='screenScrollView'] >div>:nth-child(4) {
margin-top:-50px;
margin-left:40%;
transform: translateX(-25%);
width:33%;

}

div[id*='screenScrollView'] >div>:nth-child(5) {
margin-top:-50px;
margin-left:75%;
transform: translateX(-25%);
width:33%;

}

```

[![Screen Shot 2021-11-27 at 6.18.36 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/6/167074bb97738d229e1e75fef40073f6c9862dda.jpeg)](https://code-book.glideapp.io/)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [December 9, 2021, 11:52am UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/18 "2021-12-09T11:52:29Z")

</div>

I did play around with multiple switches on a line, but the problem is that I have a variable number of switches per group. Some have 3, and some have 4. And in the future some may even have 5 or 6. That would have been a nightmare to maintain, so in the end I decided to keep it simple and implement it accordion-style 🙂

---

<div class="post-metadata">

**Author:** ![Sales\_Manager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sales_manager/32/16172_2.png) [@Sales\_Manager](https://community.glideapps.com/u/Sales_Manager)\
**Post date:** [February 16, 2023, 12:48pm UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/19 "2023-02-16T12:48:26Z")

</div>

How do I create such dropdown lists

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 16, 2023, 3:28pm UTC](https://community.glideapps.com/t/css-trick-inset-switch-components-for-grouping/35134/20 "2023-02-16T15:28:19Z")

</div>

There is nothing particularly special there, it’s just a combination of visibility settings, custom actions and a little bit of data editor logic.