# 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:** 1\
**Showing post:** 20

<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 4, 2021, 6:08pm UTC](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/20 "2021-06-04T18:08:51Z")

</div>

Hello @Jason

Personally I use CSS to supplement or create objects that I need (or at the request of some Glide users).

Here are my few observations (with my small level in CSS):

- it is quite difficult to make a “responsive” CSS (rwd?!) for the 3 screens: phone, tablet, desktop

- I also often have surprises between rendering under the editor, desktop or on the mobile, probably a lack of knowledge on my part on the problems of cross-platform PWA.

- It would be nice to publish a guide to good or bad practices (so as not to disrupt the entire application).

- _**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.** _

Here are some recent examples:

Calendar

> [@CSS Calendar & "PickCalendar"](https://community.glideapps.com/t/css-calendar-pickcalendar/27152):
>
> Hello, Despite the offer of components provided by the Glide team, I made, for my personal needs, a modal date picker. Something similar to the “Date” component but with a visualization of my data. I stupidly call it: “PickCalendar”. It exists with or without the images. I also added a no modal calendar / schedule tabs with full pictures, single pictures or no picture. I used the @Jeff_Hager calendar example, which I have to thank very much, as the basis for the structure and the like. Here …

Message box

> [@CSS MessageBox](https://community.glideapps.com/t/css-messagebox/26741):
>
> Hello, I needed a MessageBox, and since it doesn’t exist in glide, I did it with CSS. You can adapt it to your needs. For the demo, click on the “floating button” to make it appear. When the “MsgBox” is visible, you normally can’t click anything else. Here is a small demo application. EDIT : I retrieve a part of CSS in the community (but I no longer have the author), I just adapted with buttons.

Edit text

> [@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) \*/ …

Choice

> [@CSS Customizable selection](https://community.glideapps.com/t/css-customizable-selection/27208):
>
> Hello, a bit to replace the component “Choice” but it could be personalized. I made this CSS this morning Here is a small demo. [Demo](https://democomboboxpublic.glideapp.io/)

> [@CSS Choice Multiple](https://community.glideapps.com/t/css-choice-multiple/27256/11):
>
> bonjour @SantiagoPerez something like that ??? \<pre\>\<span\>\<style\> /\* Choice 1 (2nd component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(2) { margin-left:-5px; width:150px; } /\* Choice 2 (3eme component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(3) { margin-top:-97px; margin-left:115px; width:150px; } /\* Choice 3 (4eme component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(4) { margin-top:-97px; margin-left:235px; width:150px; } \</style\>\</span\>\</pre\> EDIT: I…

multi choice

> [@CSS Choice Multiple](https://community.glideapps.com/t/css-choice-multiple/27256):
>
> Hello I’ve been tinkering with Glide since August 2020. From the start I have been waiting for a multiple selection “Choice”, I know the team has a lot of work to do and that my request will eventually be available. But in the meantime I made an alternative solution (like “[CSS Customizable Selection](https://community.glideapps.com/t/css-customizable-selection/27208)”) and I took the opportunity to integrate the “[Trebuchet Method](https://community.glideapps.com/t/advanced-trebuchet-method-list-of-items-users-in-one-cell/25688)” of @Lucas_Pires (thank you lucas) Demo

Date picker

> [@CSS magic - to make the date picker more 'useful'](https://community.glideapps.com/t/css-magic-to-make-the-date-picker-more-useful/26983):
>
> Courtesy of @Manu.n - star work! Existing UX for picker and the Manu way \<pre\>\<span\>\<style\> /\* Month (Mai 2021) \*/ .MuiPickersSlideTransition-transitionContainer \> \* { font-size: 1.5em !important; margin-top:-5px; } /\* Year & Day \*/ .MuiPickersToolbarText-toolbarTxt { font-size: 2.125rem; font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-weight: 400; line-height: 1.235; letter-spacing: 0.00735em; } /\*…

other

> [@Looking for CSS magic - background for the tablet / desktop view?](https://community.glideapps.com/t/looking-for-css-magic-background-for-the-tablet-desktop-view/27294/6):
>
> it’s “meuhhh” like that

> [@How to make an Image Carousel](https://community.glideapps.com/t/how-to-make-an-image-carousel/1362/34):
>
> just for Laughs, isn’t that a carousel ??? ok it’s not funny !!!

> [@Floating Buttons, Tooltip, CSS](https://community.glideapps.com/t/floating-buttons-tooltip-css/26814):
>
> Hello, my original idea was to create tooltips for the floating buttons. Because despite many icons available, it is not always easy for some users. Except that I forgot that it doesn’t work with a mobile face_with_raised_eyebrow neutral_face thinking, so I made a version with additional text. Well, it still works in desktop mode. This is not ideal if you are using visibility. But hey in the meantime, it can still be used. \<pre\>\<span\>\<style\> .fab-target \> :hover:nth-chi…

That’s all for the moment !!

---

_[View the full topic](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641)._