Flex height for components

Help & Support đź’»
1

I would like to have components to have maximum view port height. I understand that UI Bakery has the feature of “Expand content to fit”, but it only supports when there’s only one child component.

My layout is a list view (on the right ) and a form (on the left) within the body. For some screens it’s ok but for some the components are too tall and the user will need to scroll down.

I tried to add custom CSS to the components to make the height 100% but doesn’t seems like it’s working. Any ideas how it can be achieved?

1 Like
2

Hi @simonzhang,

While I understand that you’d like to have no scrolling and responsive components, what we have here is an inherent “problem” with available and required (visible) space.

For example, the Form has a certain number of inputs, so it requires enough space to display them all without the need to scroll. On a big screen, we obviously have enough space for that:

big_screen
big_screen1084Ă—671 33.3 KB

But once the screen gets smaller, how do we distribute the space, so everything can still fit? Well, since the inputs and cards in the list view do still have excess space, we can have them adapt by changing the width and/or height, the padding between them, etc. But at one point you’ll reach a limit of how small the inputs, cards, etc. can become so that they still look nice and are not annoyingly small to use, for example with a phone:

screen_too_small
screen_too_small1114Ă—680 59.1 KB

At that point, you either need to have scrolling so they can be still a bit bigger, or rearrange the layout. Of course, there are also other strategies, like having something like tabs so you can switch between the Form and the List View or put them inside collapsable cards.

My point being, there is only so much space to distribute to the components, and at some points for smaller screens there need to be compromises in size, layout and so on.

I don’t know if that helps you in any way, but I hope it at least gave you some new thoughts and ideas. If you need concrete help in positioning and sizing the components to your liking, maybe share some screenshots of the problematic screen sizes and how the components behave :slight_smile:

1 Like
3

Hi Max,
Thank you for your reply but I think you misunderstood the problem. I understand the components are absolute sizing so when they overflow we need to scroll. The problem I have is trying to split the body into two columns (which overflows it’s accepted to scroll), but both columns will need to be 100% vh rather than absolute height. for smaller screens the view height gets smaller, content overflow and user need to scroll for each column, and if the screen size gets bigger, and there are less content of course leaves a blank at the bottom (let’s say I use a flex container in UI Bakery).

Let’s scratch my previous layout assumption out, let’s say I put one flex container within the body, on body I set it to “expand content to fit”. The flex container height is alway 100% and width is always 100%, which is great and how it should behave. However by enabling “expand content to fit”, I can only have one component in it, which is understandable, because the “expand” refers to expand vertically and horizontally or make the container 100% vw and 100% vh. What I’m looking for is a work around to have two flex container in the body, which splits the body into two columns, let’s left column is 30% vw and 100% vh and right column is 70% vw and 100% vh.

In UI bakery’s flex container, we are able to choose flex direction, and through that function I can make sure all components within the flex container to align on top. Therefore, if content is less, all components is on top, and if components/ content overflows user need to scroll.

You might ask why need to have 100% vh, the problem with normal containers is that we can only set it on absolute height. Let’s say as the dev, my screen is large, I set a normal container to the height of my screen (850px) or view port. When content overflow I need to scroll, everything is perfect. However, when a user with smaller screen (650 px) uses the app, they will encounter an issue when there’s content overflow - they will have two scroll bars. One is on the body, because the container set by me is 850px, and the second scroll bar is within the container, cause the data overflows, and this experience kinda sucks for the user.

My current workaround is to use the layout sidebar. They layout sidebar and the body forms two columns, in each column I have one card component and expand content to fit. In this case I basically got two containers that adapts the height. Furthermore, a card component have header and footer, which allows me to have some components always at the top of the view port (let’s say the section title) and some always at the bottom, (let’s say some action buttons.) and the middle card body height changes based on screen height. The content in the card body overflows the user can scroll. It works fine, but I just need to sacrifice the sidebar to achieve it.

Not sure if I explained the problem correctly, all good if UI bakery can’t achieve, just looking for alternative work arounds. Thanks for your reply again.

1 Like
4

So you were thinking something like this?

responsive

If so, the setup here is:

  • body (Expand content to fit)
    • flexContainer (Open JS mode of Flex align items and Flex align content settings and leave empty)
      • form (30% width)
      • listView (70% width)

In combination with this CSS in the Custom code tab:

<style>
  .flexContainer ub-grid-item:has(.form), .flexContainer ub-grid-item:has(.listView) {
  	height: auto !important;
    min-height: 100%;
  }
  
  .flexContainer ub-grid-item:has(.listView) .scrollable-container {
  	height: 100% !important;
  }
</style>

Don’t forget to change the names of the classes, if you have named your components differently than the standard name

1 Like
5

Hi Max,
Yes! that’s exactly it! that CSS is what I’m looking for. I haven’t tried it, but looks very promising, thank you so much!

1 Like
6

Hi Max,
I just found some time to try out the configuration. It works as how you demonstrated. I found some issue. When the list is loading more data, the list and the form are no longer scrollable, and some part got cut.

test result
test result3832Ă—1894 265 KB

I think the CSS and let the component to adapt to the content height. I updated the layout a little bit. Here’s the layout:

-body (same setup
–flexContainer (same setup)
----container (30% width, expand content to fit, let’s call it containerOne)
------form
----container (70% width, expand content to fit, let’s call it containerTwo)
------listView

<style>
  .flexContainer ub-grid-item:has(.containerOne), .flexContainer ub-grid-item:has(.containerTwo) {
  	height: auto !important;
    min-height: 100%;
  }
  
</style>

In this way the components won’t get cut. Picture below shows loading a table of 590 records (80 per page).

positiveTest
positiveTest1436Ă—958 64.5 KB

Thanks again for the help again Max, just leaving updated solution here to whom may care.

1 Like