Adjust Service Portal height dynamically

Christine24 · ‎04-30-2020

I am working on our Service Portal and our UX team realized when you zoom out on the homepage, the gray container does not move dynamically and it shows white at the bottom. Does anyone know how to make the height fluid so that the container stays and the white space goes away?

Shane Craddock · ‎04-30-2020

Hi Christine,

I used this in my portal CSS to fill the height with the last section on the page.

section {
  display: flex;
  flex-direction: column;
  main.body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    >:last-child {
      flex-grow: 1;
    }
  }
}

If this answer helped you please mark it as Helpful, if it solved your issue please mark as Correct, thank you!

View solution in original post

Jaspal Singh · ‎04-30-2020

Hi Christine,

In that case you need to work on making the Containers Fulid or Fixed. Refer link for geting it set.

Christine24 · ‎04-30-2020

Hello Jaspal,

That's only for the width, it does not seem to affect the height.

DrewW · ‎04-30-2020

Have you tried adding a class to the page that uses calc to find the right height for the container and then assign that class to the container?

Christine24 · ‎04-30-2020

I tried putting a class in the page specific CSS file and then add that to the CSS on the container but it made no difference.