Hi all, I’ve been starting to look into CSS usage in Glide and how we can better serve you. I would love if y’all could help me with this task by doing a few things. Give me a description of what you are using CSS for. Give me some before and after screenshots of what your CSS does. If it adds motion an movie would be amazing. If you are open to it, include your CSS snippet as an inline code block. Keep it short! I want to gather a large gallery and it will really really help me actually understand and better service everyones need if everyone really tries to keep things on topic and pithy. Jason

Hi Lucas, Would love to better understand how you set css for specific component on the page. Can you share an example of how I should use the css you posted? Thanks

That CSS targets the component by its order number on the screen, top-down, visibility conditions taking into account. The best use case is you want to change a component on the screen, but not its other siblings (let’s say the 1st hint text but not the 2nd or 3rd). Assuming you know the specific characteristics of the component you want to edit already, and it’s at first place, you can be confident putting number 1 in there and it will never fail to do its work when it’s visible. However let’s say you want to change a component at number 3, but your component number 2 has a visibility condition. When it’s visible your specific code will work, but when your component number 2 is not visible then your “3” will become “2”, thus break the logic. So please think through about all the possibilities to construct the right rich text components and its visibility conditions.

Thank you. I think I understood. Will play with this and see how it works

@Jason another little sugestion/variation of separator component [image] Beautiful Design App Project Showcase Check this out! Using CSS to turn our Separator: Small into a divider that rounds out the components above and below! Note, this only works with Light Theme. Dark theme apps should use this as the background/box-shadow colors: rgb(30, 34, 43); [Screen Shot 2021-06-06 at 9.57.37 PM] [Screen Shot 2021-06-06 at 9.57.46 PM] [data-test="app-hr"] { background-color: rgb(246, 246, 246); } [data-test="app-hr"]:after { content: ""; position:absolute; top:-40px; right:0…

Thank you all, please keep these coming.

Tab Horizontal [image] CSS page with Tab (horizontal, vertical) Community Resources Hello, Here is a CSS to organize your page with tabs [image] https://streamable.com/iw38x5 Tab Vertical [image] CSS page with Tab (horizontal, vertical) Community Resources In the tab version, here is the vertical version !! [image]

This is a great great initiative @Jason !

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

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 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. Pop-up box with image to clode the pop-up: [image] sticking choice to the top as a selection menu: [image] and then: [image] Turning choice to bottons: [image] 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) [image] Design buttons: [image] Change inline list to fit more items and decrease size etc.: [image] tables: [image] Padding components like map, video etc. [image] Replacement for the Hint: [image]

[image] 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 [image] Vertical Separator; Inputs Side-by-Side Ask for Help 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 /* Text Entry (2nd component) */ div[id*='screenScrollView'] > div > :nth-child(2) { margin-left:-5px; width:50%; height:70px; } /* Number Entry (3eme component) */ …

Tell Glide how you use CSS

General

Manu.n June 9, 2021, 2:26am 42

Tab Horizontal

Tab Vertical

Topic		Replies	Views
Beautiful Design App Project Showcase	818	40347	November 16, 2021
CSS for hiding stuff! Community Resources tutorial	89	9170	March 6, 2024
⚠️ Unsupported HTML/CSS in the Rich Text component will completely break in the coming weeks General	132	7024	September 6, 2022
Floating Form Button Feature Requests	122	7999	February 9, 2021
Pages Missing Components Feature Requests	96	3555	August 20, 2023

Tell Glide how you use CSS

Related topics