How to limit height size to just the screen size?

Hey guys,

I’m trying to limit the height of my page, but I can’t. Can anyone help me?

I tried adding the full screen size to the session, but it didn’t work.

I need this div to behave within the limitations, what do I need to do?

Height set to 100vh

1 Like

Hi @htnrodrigues If I understand what you are trying to do. You want the chat list within to be scrollable but the container housing it to be fixed to the height of your screen.

Please confirm this is the case, so I don’t go on with irrelevant advice. Cos I am a bit unsure from yours screenshot which of your elements is highlighted.

If this is what you are trying to achieve. Go all the way back to the TOP of your layout, select the MAIN section you are using to house all these widgets, and set its height to fixed 100vh

Then make sure that for all other containers/divs/flexboxes under it, you set the overflow property to ‘auto’. And give each of them a fixed height that falls within your screen height.

so, for you Attendance will be 100vh

container will be fixed 100vh too and overflow set to ‘auto’, and so on. That way if any of the child elements overflow weweb will not make the parent scrollable, but only the child itself will become scrollable. I hope you understand this explanation

1 Like

My Section is already set to 100vh, since it is the parent shouldn’t it set this limit on the children?

Yes, but ONLY if the children have a way of dealing with overflowing content. So the issue you are having now is that the children do not have a way of dealing with that, so the weweb default behaviour is to make their parent scrollable. So to fix that you need to inspect all the children

  1. They have a height relative to the parent and within the boundaries of the parent (so 100% or less)
  2. They have a way of dealing with their OWN content when it overflows (so auto, or scroll, or hidden BUT NOT unset) - whichever works for you.

That should fix it

1 Like

Hey @AgentD, it worked, thanks

1 Like