How to set height of container relative to the parent inside navigationtab

Back to Forums

roy mainfeld

Question

Reactive

CSS

Hello,

I am using Reactive app. I am trying to style a certain container "Comments" inside a "Navigation\TabsContentItem"

I want it to be relative to the size of the popUp of my screen if i set the height for 100% it does not inherit the hieght of the container of the popup:

I want to dynamically restrict the height. I can do it static by giving height : 400px to the comments container but that will do problems in other screen sizes, it's supposed to like this:

I checked my self in the inspect and because it is inside some outsystems widget such as tabs and adpative, the height is not inherited from the container above. Is there any way to do this?

Thank you vary much, Roy.

17 Nov 2021

Nuno Ricardo Rodrigues

Hello roy mainfeld,

See my example:

https://personal-gxzlvs5j.outsystemscloud.com/PopupWithContents/PopupWithContents?_ts=637728235122013883

It works for you? If yes you need to two things:

1) Add this css:

.popup-content {
    max-height: 50vh;
}

.popup-content .list.list-group.list-scroll {
    max-height: 40vh;
    overflow-y: scroll;
}

If you are using a list to show the items with scroll also add the class "list-scroll" to that list.

Hope it helps.

Best Regards,

Nuno R

18 Nov 2021

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines