Fixed App Page Width but Centered, with Sidebar?

💬 App Building
1

Sorry if this has been posted before, just checking to see if there is an update on this or if anyone has found a way to make this work.

I am trying to set up my multi-page app with a fixed page width.

I want the page to be centered, and I have a header and side bar enabled.

Everything is basically left-justified on the screen, so it seems that there is no way to center the app while retaining the sidebar/header.

I have attached screenshots of the current view and an example of what I am looking for (from another application, not retool, but the layout is how I want mine to be.)

Example of Desired Page View
Example of Desired Page View2286×1304 192 KB

Example of Current Page View - Retool
Example of Current Page View - Retool2011×1064 117 KB

2 Likes
2

Hello @rmerchant,

You can set a padding on the main container, something like 200px. This applies from both sides so it centers the page

4

Hi, this does not work with a sidebar. It will continue to be left justified, the main frame starts to the right of the sidebar.

6

Sorry, I missunderstood your question.
To have the entire app centered you would probably need to use custom css.

7

Hi @rmerchant,

This is a request we are tracking internally. I don't have a timeline yet, but I'll follow up here if I get any updates.

In the meantime, I agree with @GuilhermeSilva that you should be able to work around this with custom css.

1 Like
8

I think I have a solution for this that I have been using in my apps...

So I have an ultrawide monitor with over 2000 pixels in width. This leads to a weird layout when I set the max-width to a pixel value, and not a percentage.

So here is the page at 100% width

image
image2340×399 31 KB

That is as expected

Then I set my max-width to 1440px which I like, but that makes the layout awkward...

image
image2348×324 32.1 KB

My solution is to use this CSS to override the gutters, calculated from the width I set in the app. :slight_smile:

main div[data-testid="ViewerPageLayout::ScrollContainer"] {
  --total-gutter: calc(var(--retool-canvas-container-width) - var(--retoolCanvasAppTemplateMaxWidth));
  --gutter-width: calc(var(--total-gutter) / 2);
  padding-left: var(--gutter-width) !important;
  padding-right: var(--gutter-width) !important;
}

Tada!

image
image2339×237 21.4 KB

1 Like
9

Thanks so much, @khill-fbmc! I'll mark this workaround as a "solution" for visibility

1 Like