Custom CSS classes?

App Building
1

I've been doing a lot of building in Retool Mobile, and now I have some projects to build in regular apps.

One of the attractions of regular apps vs Mobile is the ability to customize things using CSS.

For starters, I have a table for which I added a column with a Play icon, which gets a url from the database query.

By default, that icon is very small, barely usable, if you ask me.

image

Although I can set the icon color, there doesn't seem to be a way to control the icon size via a property anywhere, which is very surprising, for a number of reasons:

  1. In Retool Mobile, you can set an icon size basically everywhere.
  2. In a regular app, you can drag to adjust the size of most components
  3. Regular apps have far more customization in terms of styling options at multiple levels.

So I looked at controlling the icon size via CSS, and I was able to do it, but using a horrific selector:

#tableRequests--0 > div._8HBl0 > div._c9X6x > ol > li:nth-child(1) > div._TZGEl._F386s._1V598._\+hEn3 > span > div > svg { width: 20px; height: 20px;}
image

And even that, it only targets a single cell. I need all cells/rows of that column.

Naturally, I looked at the column properties in the Inspector, for a field where I can specify a class name, that would get applied to all cells of that column:

image

But, surprise... there isn't any. I tried using the ID field, but that doesn't seem to do anything.

So my question is.. why is there no such way to specify a class name for whatever you need to target? Isn't that just another property that would get added to that component?

image

If so, it would make targeting an icon in this case as simple as:

#tableRequests--0 li div.my_custom_class_for_icon svg { width: 20px; height: 20px;}

If I had multiple columns with icons, I would just add the same class to each column and it would apply to those columns and icons also.

Am I missing something here?

Thanks.

2

And yes, I am aware I can simplify the css to affect all icons, like this:

#tableRequests--0 li div > svg { width: 20px; height: 20px;}

But this wouldn't allow for targeting a specific column only, without having to rely on an oddly named class/ID that may suddenly change for various reasons.

3

Hi @27shutterclicks Thanks for reaching out and sharing your thought process & steps you took!

Unfortunately, we haven't yet enabled the ability to add your own css classes :disappointed: Custom css, as described here, is doable in Retool web apps and it's often a helpful workaround. That said, it can be tricky. You have to do some digging to find the proper css class, and it's possible that as the product changes, the classes could change (without warning).

We generally suggest relying on the natively supported styling options when possible & submitting feature requests for additional options.

I've linked our internal ticket where we're tracking requests for adding custom css classes to components and the ticket where we're tracking requests for icon sizes in the table. If either ships, I'll post back on this thread!

1 Like
4

@Tess we've just run into this issue where a lot of our custom CSS broke because class names were updated -- very frustrating.

Is there any way to revert back? Or to get any kind of mapping of which names changed to what so we can update?

1 Like
5

Same issue :smiling_face_with_tear:
Please revert it. I just noticed that at since this week our app looks very weird to end users. We used css on several components, it's really bad now!
Also stepper buttons appeared in custom component numbers inputfield, where they were hidden previously.

6

Exactly - I went through and updated ours to get it back to how things should look - using ._retool- named components as much as possible, but for some more precise styling, you're forced to find the actual class names (.dJkOfk type names - random letter strings) -- and those just changed AGAIN.

It's like cat and mouse trying to keep up with these changes meaning we do not have full control over stylings and cannot count on a consistent look.

@Tess anything we can do about this?

7

Hi @ellenhelena & @shawnhoffman,

Sorry to hear about the change! :disappointed: We don't have a list of class names that were changed, but this is expected to happen over time. Custom css is unfortunately not the best experience for long term solutions at the moment :slightly_frowning_face: We have a feature request for adding a component field to set custom css classes, which would mitigate this issue. I'll check in on that request since I don't know what the timeline is. I'll follow up if I get any updates

If you're able to share specific css you need, I can also separately add a request to add native support for those specific styling options.

1 Like
8

We'll just have to keep playing cat and mouse until then, it appears. We have several margin, padding, hover specifics -- the issue is more so that it's not for a full component. Instead, it's styling, for example, the selected tab of a tab group. I haven't found a way to target that specific part of the component rather than the component itself.

9

Any update on a timeline for custom CSS classes? It's super confusing to me that custom CSS is something we can add, but with the caveat that we shouldn't use it because eventually it will break? The Retool UI builder is missing some super basic and useful options (like setting text size which is super frustrating) but I'm afraid to use custom CSS because I don't want to have to dig back through every Retool app to make sure they aren't broken after every update.

10

Hi @Travis_Witt,

No update on custom css classes, but we did ship a feature for setting text size on many components

11

@Travis_Witt I'm sure that @Tess can provide more insight/confirmation, but in our experience, we have rarely (perhaps never, but I'm hesitant to speak in absolutes) had issues with custom CSS so long as you target the retool component name.

By that, I mean using a ._retool-yourComponentName rather than the 6-character class, such as .xDnKDw or whatnot.

Sometimes it's tough to get that granular, but we've used a combination of :where, :not, and similar pseudoclasses, along with targetting specific IDs instead of class names, such as [div data-testid="someValue"].

With that approach, even if the .xDnKDw changes to .kDdfAd or whatever it becomes, the component name and id remains the same. So far, so good - but I completely agree that having native support for custom CSS with a strong warning not to use it is counter-intuitive, at best, and certainly prohibitive for any company or app that can't risk styles breaking at any moment.

1 Like