Expand component fullscreen

💬 App Building
1

Has anyone figured this out?

I would love to expand my table to fullscreen when needed.

I came across this which suggested it is possible via CSS but no method mentioned. https://community.retool.com/t/i-am-currently-trying-to-create-a-button-so-that-on-click-they-will-be-able-to-expand-a-container-to-full-screen/52917

3

Hey @ferret141

Use this custom css according to your table id for full screen table.

image
image1529×866 138 KB

#table1--0 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: 9999; 
}
2 Likes
4

Hey @ferret141 - the CSS that @WidleStudioLLP shared above looks like it should do what you need it to! Are you looking for anything else, in particular?

5

Thanks @WidleStudioLLP for the CSS snippet.

And thanks @Darren for following up on this.

The snippet does expand the table but I have two new challenges. Note UI and DOM manipulation isn't my forte so it could be PEBKAC.

Challenge 1: Table expands outwards from its position rather from the starting corner of the browser window:

image
image2686×1233 304 KB

image
image2253×1414 401 KB

Challenge 2: How can the custom CSS on the page be toggled?

6

Ah I missed your response, @ferret141! Those styling rules are the right ones for your use case, but you might need to add !important to each line in order to make sure they're enforced.

image
image942×582 50.5 KB

The other thing that not a lot of people realize is that you can use double curlies when writing custom CSS in order to conditionally apply those rules. I hope that helps!

1 Like
7

Have you had a chance to revisit this, @ferret141?