List of all features needed before CSS BAN

[Hassan_Nadeem]

Hi Gliders,

On this thread we can make a list of all the simple yet important features that are achieved only by CSS, so maybe Glide can add them before imposing a ban on CSS.

My list is:

1. Colorful texts
2. Colorful buttons
3. More than 4 horizontal tiles on inline lists

You all can add yours as well

[Robert_Petitto]

My top reasons for using CSS:

• hiding back button
• reconfiguring of inline list fields (especially the card layout)
• making components sticky to top/bottom of screen
• manipulating the comments component to provide a more chat-like experience
• making video component “inline” and not full width
• adding badge/counts on top of inline list tiles or tab icons
• creating a modal overlay on a screen that forces a user to click a button before viewing content on that screen
• more than 4 columns for inline list > tiles
• choice component: scrolling chips (not stacked); making a choice component sticky so it can act like a screen filter

[Yasin_Hassanien]

Hiding back button is critical

[MattLB]

And nice looking tables. This feature request seems to go back to at least Oct '20

It comes from this thread: Expand 'Image' and 'Title' component to edge of screen - #30 by ThinhDinh

[David_Gabler]

This list covers everything I’ve ever done with CSS.

[Uzo]

• resizing and positioning elements (fixed, absolute, and relative)
• multiple column tables, as list
• visibility based on user screen size
• fonts color, size, and type for all elements
• changing components backgrounds, borders, shadowing
• on click and on hoover reactions
• arranging multiple components horizontally, for desktop view

[ThinhDinh]

An update:

⚠️ Unsupported HTML/CSS in the Rich Text component will completely break in the coming weeks

Hi Matt and other people that have been using our Notion, From David and Mark’s comments, I see that the DOM structure will change, but they will not disable custom CSS. Me and other people will definitely spend time to update our Notion docs so that the old code will work with the new DOM, that’s the best we can do. Let’s say previously, just for the sake of an example, a [data-test="app-vertical-list"] would now become something like [data-test="app-list"] > div[class="vertical"]. We will t…

[resepsionis_ganteng]

Like renaming the target element?

[Manikandan_R]

Altering the components size,button size to small,table size, provide colour change to all components,button bar progressing image like in button click.

[Xavier_Delplanque]

A few things I listed in the app made with @grumo
Some have already been mentioned.
I’m also adding a visual to clarify the end result.

• pin components (buttons, stopwatch, hint …) to the bottom of the screen
• a smaller / more configurable stopwatch
• allow to hide the tab navigation on specific / modal screens
• display rich text and image components as cards so it looks more tappable

[grumo]

We made such an awesome app for such a good cause! It will be sad to see some of the functionality die when CSS is removed. I really hope the Glide team come come up with some native alternatives. Please!

[saphier]

We use CSS to make our apps make better use of real estate on a desktop, and appear less like a phone app on a desktop. Example: this is a detailed view with an inline list and a single record view depending on the user selection with some CSS manipulation.

Given the existence of Pages I’m sure it’s not a use case that is of top priority. But it was certainly nice alternative for us specifically.

So my unlikely feature would be: improved layout options for desktop view in Apps

NB: My understanding is that CSS feature is not being disabled, just that the way we target elements may no longer work because the structure of the page will be changing in the next couple of weeks. So I’m hoping once the CSS structure settles down we’ll be able to re-create our existing views. But if they have dynamic class names that may not be possible.

[erwblo]

Feels doable!

[Joe_Gabriele]

Looking to see if anybody has some CSS ideas on how to reformat progress bars from

To something more like this:

Main parts being moving the bottom text to the right side of the bar as I figured out how to shorten the width of the bars adjusting the margin.

Thanks!