Table not expanding when component hidden

App Building
1

Hi,

I have a table and a map component horizontally next to each other.
When I hide the map component, I would like the table to expand completely horizontally.

It doesn't make a difference, if the components are inside a container or not.
Both have "Maintain space when hidden" in the appearance settings deactivated.
I also tried creating new components but it also doesn't make a difference.

So how can I achieve this?
Thanks in advance!

1 Like
2

The components automatically expand vertically, but not horizontally. Maybe put your map in a drawer that slides out over the table?

3

Thanks for the hint!

Didn't try this, but that's the problem.
Will have to try a different way.

4

I had the sae problem .
thanks for solution.

5

I have discoverd the better way to do this with the help of Ai .

6

Great! Mind sharing how?

7

Here is the answer from AI

  • Check Flexbox or Grid Layout: Ensure that the parent container of both components uses a CSS flexbox or grid layout. For a flexbox, use display: flex on the container, and set flex-grow: 1 on the table to allow it to expand when the map is hidden.
  • Responsive Behavior: If you're using a responsive framework or library, ensure that the table is set to occupy the available space. For instance, in CSS, you might use width: 100% or similar settings.
  • Re-render or Refresh: Sometimes UI components may need to be re-rendered or refreshed to adapt to the new layout. Check if there is an option to refresh the layout after hiding the map.
1 Like
8

So did you add custom CSS to the page?