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