Tell Glide how you use CSS

Thank you all, please keep these coming.

4 Likes

Tab Horizontal

Tab Vertical

This is a great great initiative @Jason !

I want all the things I read here without css :wink:

7 Likes

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:

  1. Turning choice to bottons:

  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

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

  4. tables:
    image

  5. Padding components like map, video etc.

  6. Replacement for the Hint:

8 Likes

see here

1 Like

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

2 Likes

another example for your collection :wink:

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

Does it work if you add !important;?

It doesn’t

Do you mean the switch component’s title?

Yes! :grinning:

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

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

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

1 Like

sorry i did not see is about switch

Check this out.

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

image

2 Likes

Beautiful @ThinhDinh, thank you so much

2 Likes
<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;
}
1 Like