Vertically "Middle" Content Responsively

Help & Support 💻 How-to's
1

I understand using flexboxes when we have fixed heights.

How can I configure UI bakery so that my UI is fully responsive:

  1. The content will take up the full height of the available screen, and will vertically reposition as the screen height changes?

I’m designing for multiple screen sizes (starting with the LARGE size) and need the layout to retain it’s scale/shrink when there is less vertical screen space.

It appears I need to apply some custom CSS classes (like 100vh) but I’m having trouble understanding where these need to be applied in conjunction with flexboxes.

Thanks

2

Hello @Sbenders_Pryon

I will need to consult with the dev team on this one. I’ll get back to you shortly!

Cheers,
Kate

3

Thanks!

For example, here are my custom CSS styles that I’ve applied

<style>
  /* responsive height handling*/
  .vh-100, .max-height{  
    height: calc(80vh - 440px) !important;   /* This is applied to the root "body" component */
  }

  .content-full-height {
    height: calc(90vh - 300px) !important;  /* this is applied to the content container  */
}

</style>

This works alright, but I’d love to know best practices (or maybe if there will be a flex container configuration to enable this)

Thank you!

4

Hi @Sbenders_Pryon

Here are some pieces of advice from the dev team. We suggest the following steps:

  1. turn on the ‘Expand content to fit’ setting in the root grid;

    CleanShot 2025-01-27 at 12.12.49@2x
    CleanShot 2025-01-27 at 12.12.49@2x1920×1201 180 KB

  2. add a flex container

  3. add the rest of the components to the flex component and manage their position from it.

Please note this suggestion might impact the performance of the app.

This:

  1. The content will take up the full height of the available screen, and will vertically reposition as the screen height changes?

is only possible to achieve with 1 component across the whole page with the
‘Expand content to fit’ setting. Or the way you did, combined with the ‘Expand content to fit’ setting.

1 Like
5

Ok. Thank you @Kate ! I’ll try!

1 Like
6

@Kate , I’m still having some trouble - could you help me with an explicit example?

image
image1190×895 48.9 KB

Here is a modal that I’m trying to re-create.
You can see there is a “fixed” sidebar to the left - full height.
Then, to the right, are 2 - 5 rows (depending on how you slice it or want to handle headers/footers) that also occupies the full height.

How could I replicate this layout in UI Bakery - where if the screen were to resize, the elements would retain their position.

I don’t need EXACT middle and spacing, but I’m trying to avoid having a big empty space at the bottom.

I suspect the details are somewhere in how the containers are managed, but I’m not able to figure it out. When I make the “Expand to Fit All Content” a Flexbox, the nested Flexboxes inside no longer expand to fit. I could definitely be missing something.

Should the correct structure be:
-Modal + Expand to Fit
–Flexbox +ColumnFlex?
—Container1(left side) +Expand to Fit
—Container2(right side) +Expand to Fit
-----(managed positions using the positioning grid)

Are you able to point me in the right direction?

Thank you!

7

Hi @Sbenders_Pryon
I’ll consult with the dev team about it

8

Hi @Sbenders_Pryon

I’ll send you a zip archive of a test app with this case.

9

Received. I’ll take a look at it.
Thank you so much!!!

1 Like