Custom CSS not rendering in preview mode

App Building
1

  • Goal: I am trying to create shadows around my containers in my app. I have found a way to do it using custom css, but when I preview the app, all my custom css edits are not shown.

  • Details: Here is an example of my custom css code:

div[data-testid="container3"] {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  background-color: #F2F1ED;
  width: 600px !important;
  height: 450px !important; 
  position: absolute !important;
  left: 200px !important;
  top: 650px !important; 
  resize: none !important;
}

For context, my container has so many edits because the grid was a bit limiting (I struggled to get a nice layout with the built in grid for the main window). My second question relates to this. How do I make the charts in my containers automatically adjust to the container's size? I've tried using flex but that does not work.

Thanks in advance!

2

Hi WMulaudzi & welcome to the Retool community forum! :grinning:
Would you be able to confirm a few things for me first so that I can get more context on the issue?

  1. For your custom CSS, make sure it's correctly applied in the Custom CSS section found by clicking on the gear icon in the App IDE.

  2. Check that you're using valid selectors based on Retool's unique naming convention, like _retool-textInput1 for a 'textInput1' component.

3

Hi Diego,

Thanks for your response!

Yes I am adding the custom css in the custom css window you see after clicking on the gear.

Secondly, my custom css looks like this:

* {
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
}

:root {
--retool-canvas-max-width: none !important;
}

/* Add shadows to each container and fix width */
body div[data-testid="container1"],
body div[data-testid="container2"], 
body div[data-testid="container3"],
body div[data-testid="text1"] {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5) !important;
  border-radius: 12px !important;
  background-color: #F2F1ED !important;
}

body div[data-testid="button1"] {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5) !important;
  border-radius: 12px !important;
  background-color: #B45082 !important;
}

If I use the _retool-textInput1 format, how would my custom css change?

Thanks!
WMulaudzi

4

Hi there!
Are you currently seeing any changes reflected at all? We typically recommend this format over using the data-set but I am curious to know what changes you are successfully seeing and which ones you are not? If you could provide that context it would be super helpful! :grinning:

5

Thanks Diego.

I am not seeing any custom css output in preview mode even with the custom css code I showed you. I can see the changes in editor mode though, just not when I click preview.

How do I use the _retool-textInput1 format?

6

Hey WMulaudzi,
When you are typing your css selector use the format of ._retool-nameOfComponent. Please look at the screen shot below to see how I am able to change the buttons font and box shadow.

Screenshot 2024-07-02 at 12.25.42 PM
Screenshot 2024-07-02 at 12.25.42 PM2530×1238 189 KB

1 Like
7

Hi Diego,

Thanks so much! That worked. So I was basically accessing the widgets with the wrong IDs. Using your method worked.

2 Likes
8

hey @WMulaudzi!
i am passing through a similar problem. i tried to use Diego's solution but it didnt work.
how did you final code look like?

9

Hi @tui,

My code looked something like this

._retool-container1 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5) !important;
  border-radius: 12px !important;
  background-color: #F2F1ED !important;
}

Where container1 is the id of the container. Hope that helps!

3 Likes
10

ty!