Different css classes on different browsers

image
image
image
image

On Google Chrome and Mozila Firefox i have different classnames and because of it my custom styles doesnt appears on google chrome. this bug has already occurred twice in the past week and clearing the cache helped. even that doesn't help at the moment. other users also have the same classes on all browsers as mine on Mozila Firefox and all styles are present. why do I have other classes and how to fix it?

10 minutes later, the styles changed again in Firefox. What is happening and how to stop it?
image

I would suggest using Retool Custom CSS and build your custom selectors on something that is more stable. Try to avoid matching anything generated and aim for id's or ._retool targets

I don't really understand the advice to use Retool Custom CSS when I already use them :slight_smile:

._retool targets don't solve the problem when I need to change specific rows or columns depending on conditions. IDs don't work at all in my case.

I need an answer why my PC has different class names from everyone else who uses this app. And even when I go to a new browser I see the usual css classes, and after 10 minutes the styles change again.

1 Like

Sorry, I misunderstood then. That is very odd behavior...

Can you verify... maybe... opening the page on your and theirs, in private browsers? Try and eliminate cache issues?

But... It almost sounds like a query runs, adds the data, then that's why the CSS is changing?

Maybe test disabling the query and see if the CSS becomes stable?

I'm shooting in the dark, as I have not encountered this.

Edit: Could you make a minimal example where this happens and export it? I know it might be complicated with your data connected.

It happened like this: I installed Mozilla specifically to check the styles. Initially, when I opened the app, the class names were the same as for all users. And literally 10 minutes later, when I refreshed the page, the class names became the same as on the previous ones: different from the classes displayed on all other devices. I also want to clarify that after the classes were changed, they did not return to the names that all users have.

Hi @Vlad_Posibl! There was a recent post in the Community Show & Tell category that could potentially help with this issue. In general, though, class selectors are not expected to be stable and we recommend using the _retool-componentName selector whenever possible.

It sounds like you want more granular control, though, so I understand why you'd want to use the raw class name selectors. I did some testing on a few different browsers and the class names never changed. I assume you're viewing the app as a user and not an editor?

The only thing that comes to mind is that an extension is mutating the class names but that wouldn't persist through a refresh, so I'm at a bit of a loss.

1 Like

Hey @Vlad_Posibl and thank you for the mention @Darren! :slight_smile:

Had to edit my post since I just realized it was in reference to the same post that @Darren was sharing :laughing: I'd love to know if that solves your issue! :pray:

1 Like

@Vlad_Posibl If you could post a screenshot of both browsers with their devTools open with details on what's described below:

Open devTools and click the element inspector tool:

Use it to click the outermost section of your component, or whichever container within your component in which you're referencing in your original post.

In the screenshot, if you could include that selected HTML element, along with a cascade of at least a few levels up/down of its parent and child elements (similar to the above image), I'm confident we can figure this out!

There's a stable way to go about styles adhering not only through different browsers, but through updates in Retool, as well (so far)!