# Tell Glide how you use CSS **URL:** \ **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:** 4
**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, 9:05am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/61 "2021-07-06T09:05:22Z")
it is now… I update it ---
**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, 9:27am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/62 "2021-07-06T09:27:57Z")
> [@Uzo](#): > > `.fCJThA` I think you’re using an unstable class name here and may vary from app to app, which makes it possible that this won’t work in an app that is not the one you take this class name from. ---
**Author:** ![Sharath\_S](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sharath_s/32/28000_2.png) [@Sharath\_S](https://community.glideapps.com/u/Sharath_S)\ **Post date:** [July 6, 2021, 9:56am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/63 "2021-07-06T09:56:42Z")
omggg ---
**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, 10:03am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/64 "2021-07-06T10:03:19Z")
yes, you right… but then you can’t control the width because it will push the button out of the screen… if there is a problem you can always use your method… ```auto [data-test="app-switch-view"] :nth-child(1){ 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; } ``` ---
**Author:** ![Mahim](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mahim/32/24888_2.png) [@Mahim](https://community.glideapps.com/u/Mahim)\ **Post date:** [July 12, 2021, 6:03pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/65 "2021-07-12T18:03:59Z")
This looks great! Curious - what’s the code you used to stick the choice component to the top of the screen? Thanks ---
**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:** [July 12, 2021, 6:51pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/66 "2021-07-12T18:51:50Z")
A simple CSS with position fixed parameter. Will be at my pc in the morning and can send you ---
**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\ **Post date:** [July 28, 2021, 9:00am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/67 "2021-07-28T09:00:43Z")
Hi, a nice CSS trick thanks to @ThinhDinh to submit an Edit screen even if _required_ choice components are not selected. Use case: in an _Edit_ screen, wish to display many choice components in bar for UX matters (instead of dropdown menu), but with **5** items. → This implies to make the choice component _required_, even if it is not mandatory in reality → This implies that the User is unable to _submit/done_ the Edit screen if each component have not been selected. [https://community.glideapps.com/t/edit-screen-or-visibility-conditions-on-entry-ones/29564/12?u=ays\_0908](https://community.glideapps.com/t/edit-screen-or-visibility-conditions-on-entry-ones/29564/12) (nb: CSS to be created **before** choice components are created) ``` [data-test="nav-button-Done"] { pointer-events: auto; } ``` ---
**Author:** ![Mr\_AJ\_Gamer\_95](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mr_aj_gamer_95/32/30088_2.png) [@Mr\_AJ\_Gamer\_95](https://community.glideapps.com/u/Mr_AJ_Gamer_95)\ **Post date:** [August 6, 2021, 9:33am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/68 "2021-08-06T09:33:46Z")
Sir can you please provide me the css of the 1st one please please please ---
**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\ **Post date:** [August 6, 2021, 11:10am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/69 "2021-08-06T11:10:14Z")
Has anybody figured out how to apply CSS to a specific button type (solid, transparent, border only) without using the class name (ex: .ijHjak)? My buttons also have visibility so it appears nth-type(#) changes based on which buttons are visible to the user as one person might have 8 buttons and another might see 10. ---
**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:** [August 6, 2021, 11:49am UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/70 "2021-08-06T11:49:36Z")
> [@Joe\_Gabriele](#): > > My buttons also have visibility so it appears nth-type(#) changes based on which buttons are visible to the user as one person might have 8 buttons and another might see 10. Yes, this is a key point anyone should take into account every time you use a position-specific CSS. You would have to do a math, then a template OR have the right conditional visibility conditions for each type of user, taking into account every element on the screen. ---
**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\ **Post date:** [August 6, 2021, 12:05pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/71 "2021-08-06T12:05:33Z")
I guess I’ll have to wait until Glide implements button specific classes. There is [data-test=“app-button-view”], but that effects all button types and not a specific type of button. @Jason Maybe we can do like [data-test=“app-solid-button-view”], etc for each button type? Could be a good item for the next Live session! ---
**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:** [August 6, 2021, 12:07pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/72 "2021-08-06T12:07:26Z")
For this problem I made this request > [@Manu.n](#): > > _**Finally The Most Important (for me): As now we can name the components,**_ > _ **is it possible to have class or id names in relation to the names. it would then be easy to identify.** _ ---
**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\ **Post date:** [August 6, 2021, 12:11pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/73 "2021-08-06T12:11:05Z")
That makes A LOT of sense! So in theory, if you rename the Button 1 component “Hello”, it would get a class name of like “button-hello”, which you can then use with CSS to target that specific button. ---
**Author:** ![dvamvoo01](https://avatars.discourse-cdn.com/v4/letter/d/ce7236/32.png) [@dvamvoo01](https://community.glideapps.com/u/dvamvoo01)\ **Post date:** [August 6, 2021, 12:23pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/74 "2021-08-06T12:23:01Z")
i haven’t used CSS yet because it seems complicated. maybe a general explanatory video would help, i haven’t found any on YouTube in English… ---
**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:** [August 12, 2021, 12:52pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/75 "2021-08-12T12:52:52Z")
Why is it that sometimes, and with some CSS, the components in the editor look different in the real app? Some times the position of the component is different than in the real app. ---
**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:** [August 12, 2021, 1:15pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/76 "2021-08-12T13:15:41Z")
My guess would be that it is browser-specific behaviour. CSS is a black art (at least to me), and getting it to play nicely with all browsers can sometimes feel like an endless game of whack-a-mole. ---
**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:** [August 28, 2021, 1:23pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/77 "2021-08-28T13:23:36Z")
I don’t know if it will help you, but we can perfectly select a single specific button if it is defined as floating. ---
**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\ **Post date:** [August 28, 2021, 2:03pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/78 "2021-08-28T14:03:26Z")
I did not! Could you explain further? ---
**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:** [August 28, 2021, 2:33pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/79 "2021-08-28T14:33:03Z")
Due to the fact that the float button has the customizable title attribute which is normally used as a tooltip, we can use this to select exactly that element. Wait a few minutes … I’m sharing an app that I wrote as an exercise. ---
**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:** [August 28, 2021, 2:46pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/80 "2021-08-28T14:46:36Z")
@Joe_Gabriele Copy this APP, the concept is very simple. If you want to customize a button you can edit its style in the “Button Types” Tab of this app. > **[Custom Button](https://custom-floating-btn.glideapp.io/)** Dear @Jason it would be incredibly much easier to select any component if we could have a programmable attribute (even better if dynamic) as is the case with the floating button. [Previous page](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641.md?page=3) [Next page](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641.md?page=5)