Tell Glide how you use CSS

[Jason]

Thank you all, please keep these coming.

[Manu.n]

Tab Horizontal

CSS page with Tab (horizontal, vertical)

Hello, Here is a CSS to organize your page with tabs [image] https://streamable.com/iw38x5

Tab Vertical

CSS page with Tab (horizontal, vertical)

In the tab version, here is the vertical version !! [image]

[Roldy]

This is a great great initiative @Jason !

[erwblo]

I want all the things I read here without css

[yinon_raviv]

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:

and then:

4. Turning choice to bottons:

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

   

6. Design buttons:
   

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

   

8. tables:
   

9. Padding components like map, video etc.
   

   

10. Replacement for the Hint:
    

    

[Manu.n]

@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

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 [image] 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) */ …

[yinon_raviv]

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

[Manu.n]

another example for your collection

CSS for only some background cards

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…

[PabloMFalero]

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

[Robert_Petitto]

Does it work if you add !important;?

[PabloMFalero]

It doesn’t

[ThinhDinh]

Do you mean the switch component’s title?

[PabloMFalero]

Yes!

[Uzo]

is working… maybe you are applying it wrong?
try it in action here

[PabloMFalero]

@Robert_Petitto

!important;

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

[Mark_Turrell]

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

[Uzo]

sorry i did not see is about switch

[ThinhDinh]

Check this out.

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

[PabloMFalero]

@ThinhDinh

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

Beautiful @ThinhDinh, thank you so much

[Uzo]

<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;
}