# Tell Glide how you use CSS

**URL:** <https://community.glideapps.com/t/tell-glide-how-you-use-css/27641>\
**Category:** General\
**Created:** [June 4, 2021, 4:09pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641 "2021-06-04T16:09:41Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![Jason](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jason/32/14_2.png) [@Jason](https://community.glideapps.com/u/Jason)\
**Post date:** [June 7, 2021, 3:01pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/41 "2021-06-07T15:01:21Z")

</div>

Thank you all, please keep these coming.

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [June 9, 2021, 2:26am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/42 "2021-06-09T02:26:40Z")

</div>

Tab Horizontal

> [@CSS page with Tab (horizontal, vertical)](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803):
>
> Hello, Here is a CSS to organize your page with tabs [https://streamable.com/iw38x5](https://streamable.com/iw38x5)

Tab Vertical

> [@CSS page with Tab (horizontal, vertical)](https://community.glideapps.com/t/css-page-with-tab-horizontal-vertical/27803/6):
>
> In the tab version, here is the vertical version !!

---

<div class="post-metadata">

**Author:** ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)\
**Post date:** [June 9, 2021, 8:01am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/43 "2021-06-09T08:01:28Z")

</div>

This is a great great initiative @Jason !

---

<div class="post-metadata">

**Author:** ![erwblo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erwblo/32/75_2.png) [@erwblo](https://community.glideapps.com/u/erwblo)\
**Post date:** [June 9, 2021, 8:12am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/44 "2021-06-09T08:12:45Z")

</div>

I want all the things I read here without css 😉

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [June 9, 2021, 6:45pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/45 "2021-06-09T18:45:07Z")

</div>

First I want to say this is amazing what the guys here are doing and @Jason this is awsome initiative.  
second, mt 2 cents on things I’m doing

1. align text right, for everything, basically, beside the action text component which is working correctly in RTL (comma, question mark etc. are in the right place and not align left even when aligning the text to right). So, using CSS for aligning all the components.

2. Pop-up box with image to clode the pop-up:  

3. sticking choice to the top as a selection menu:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/d/bd4e3f823b3a26a5a2a978363caa162073c51763.png)

and then:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/1/21f28bff5a8506c4eec22989b40b6ec7396684c1.png)

1. Turning choice to bottons:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/1/c132d38ef332abc2829d38e115edd15a3299f123.png)

1. Changing size and design for input components (would love to be able to put 2 next to each other and also input + text component next to each other)  

2. Design buttons:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/2/42db31051dc446a1c6acc732283161a9ff4cfe0a.png)

3. Change inline list to fit more items and decrease size etc.:  

4. tables:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/0/d05bbe3e3b5d476d25b969421a09ca707d18bdc7.png)

5. Padding components like map, video etc.  

6. Replacement for the Hint:

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [June 9, 2021, 7:08pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/46 "2021-06-09T19:08:58Z")

</div>

> [@yinon\_raviv](#):
>
> (j’aimerais pouvoir en mettre 2 l’un à côté de l’autre et également entrée + composant de texte l’un à côté de l’autre)

see here

> [@Vertical Separator; Inputs Side-by-Side](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/3):
>
> Hello, @erik If you are interested, here is a small example. You must adapt the number in each “nth-child (…)” according to the order of the components. Be careful, if you change the visibility of the components, this trick no longer works (or badly!) Test on Chrome / Windows 10 & Android The CSS \<pre\>\<span\>\<style\> /\* Text Entry (2nd component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(2) { margin-left:-5px; width:50%; height:70px; } /\* Number Entry (3eme component) \*/ …

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [June 9, 2021, 7:12pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/47 "2021-06-09T19:12:38Z")

</div>

thanks!!! found it few min before you sent. you do amazing stuff with CSS

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [June 28, 2021, 5:21am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/48 "2021-06-28T05:21:44Z")

</div>

another example for your collection 😉

> [@CSS for only some background cards](https://community.glideapps.com/t/css-for-only-some-background-cards/28427/9):
>
> Here is an example. you can change the background picture based on a value or the like. you can also use several different images for different cases. The trick is to have an empty image to display if the condition is not met. I made a 10x10px transparent image. For the background image (100% box), I made a 30x30px with an opacity of 30%, then you have to experiment to find the right color and the right opacity. CSS is then very simple (see the demo application) Do not use my links to the…

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [July 5, 2021, 3:47pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/49 "2021-07-05T15:47:26Z")

</div>

Hey Robert. I’ve been trying to achieve this in the switch title but with no luck. If I use the inspect element it changes fine, but when applying it in the app with this code, or other codes it won’t work, any advice?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [July 5, 2021, 4:57pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/50 "2021-07-05T16:57:16Z")

</div>

Does it work if you add `!important;`?

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [July 5, 2021, 5:39pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/51 "2021-07-05T17:39:01Z")

</div>

It doesn’t

---

<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:** [July 5, 2021, 11:45pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/52 "2021-07-05T23:45:43Z")

</div>

Do you mean the switch component’s title?

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [July 6, 2021, 6:22am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/53 "2021-07-06T06:22:46Z")

</div>

Yes! 😀

---

<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:** [July 6, 2021, 6:39am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/54 "2021-07-06T06:39:47Z")

</div>

is working… maybe you are applying it wrong?  
try it in action [here](https://code-book.glideapp.io/dl/ewAiAHQAIgA6ADIALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AYwBvAGQAZQBzACIALAAiAHIAIgA6ACIAUQB2AEMAbAB0AFMAUQBsAFMAZQB1AFQAUgBxAGQATABUAEIAUABoAFUAZwAiACwAIgBuACIAOgAiAEMAUwBTACAAYwBvAGQAZQAiAH0A)

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [July 6, 2021, 6:46am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/55 "2021-07-06T06:46:20Z")

</div>

> [@Robert\_Petitto](#):
>
> !important;

It works for the basic table, but I’m trying it for the switch button title…

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [July 6, 2021, 6:49am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/56 "2021-07-06T06:49:09Z")

</div>

There is no Switch component to test on in the CSS Code Book ☹

---

<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:** [July 6, 2021, 7:09am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/57 "2021-07-06T07:09:28Z")

</div>

sorry i did not see is about switch

---

<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:** [July 6, 2021, 7:45am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/58 "2021-07-06T07:45:46Z")

</div>

Check this out.

```auto
[data-test="app-switch-view"] :nth-child(1) {
white-space: break-spaces;
}

```

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/7/87e1f37eaf533ea0806dc96c1063a0c82ca127e0.png)

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [July 6, 2021, 7:49am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/59 "2021-07-06T07:49:08Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> [data-test="app-switch-view"] :nth-child(1) {
> white-space: break-spaces;
> }
> 
> ```

Beautiful @ThinhDinh, thank you so much

---

<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:** [July 6, 2021, 7:58am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/60 "2021-07-06T07:58:21Z")

</div>

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

.fCJThA {
width:80%;    
font-weight: 500;
    font-size: 1rem;
    line-height: 1.1875rem;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: red;
    text-overflow: ellipsis;
    white-space: break-spaces !important;
    overflow: hidden;
}

```

[Previous page](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641.md?page=2)

[Next page](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641.md?page=4)