Borders Not Appearing in Nested Containers Within Modules

Hello, I posted about this in an unlisted topic so I wanted to post again in case that means it won't be seen.

I am encountering a visual issue with modules. I have the following scenario:

  • I have nested containers in a module
  • The inner nested containers are missing their borders

I was able to recreate this by placing nested containers in a module, and placing that module in a page:

Module view:

App view:

I see borders, but if you're looking to define them more, you would need to do that in the module which contains the container component itself.

The inner container doesn't have a border in the app view (the second image). I have tried changing settings of the inner container, but it doesn't make a difference. Let me make it more obvious:

In the module view, I have the inner container border set to red:

When using the module in an app, the red border disappears:

If you're looking to have different border colors for nested containers, I am not sure if that will work based on what you have posted.... but if you want all containers to have the same border, perhaps change the outermost one, and it might cascade down through the nested ones....if not, then it may need to be looked at by the Retool team...

Hi Scott, not sure if my initial post isn't clear. The inner border is completely missing--that's the issue I'm trying to solve. I changed the border to red to highlight the missing border when using a module in an app.

I can wait until the Retool team has a chance to respond.

Am I allowed to bump? I'm still encountering this error and haven't found a solution yet.

It seems like the module is disabling the border

Indeed, although weirdly enough, the border appears in the editor when I first place the module, or if I adjust its size. However, when saving or reloading the page, the border disappears again

@Daniel_Podlovics thanks for pointing out this bug! We're investigating it currently and should have a fix soon :slight_smile:

1 Like

Awesome, glad to hear it's getting looked at! This is what my issue looks like in context by the way.

  • I have a "calendar" module, with the form below it.
  • As you can see, the border is missing around the form with the title that says "(Select 'New Event' or 'Edit event')
  • Below that, there's a tabbed container with tab titles "Household Members", "Bookings", and "Advanced" that's also missing its border.

Looking forward to hearing back :slight_smile:

-Dan

I see the same issue: the nested borders are always visible when editing and previewing the module directly but not when the module is embedded in an app.

Hey Brenna, any update on how things are going?

Hey @Daniel_Podlovics , I unfortunately don't have a timeline to share quite yet, but we're still investigating and hope to share an update soon. We'll keep you updated when a fix is ready!

@Daniel_Podlovics we've pushed a fix in which should be in Cloud version 3.27.0 :slight_smile: You can check for when that version is released in the Cloud changelog!

Just waiting on v3.27.0 to release before I mark this as the solution :slight_smile:

edit: even though v3.27 isn't out, this is fixed in my app. Woohoo!

1 Like