Setting the tui-root element's height to 100%

[Teebo]

Inside the root/default route of my app, I am rendering a default component with a template wrapper of height: 100% the wrapper's child elements are also set with height: 100%;.

After wrapping my router-outlet like below

app.component.html

<tui-root>
  <router-outlet></router-outlet>
</tui-root>

My content no longer fills the available height. I have then updated my stylesheet to give a height to the root element.

tui-root {
  height: 100%;
}

This fixed the effect of wrapping the router outlet with the tui-root.

Would this have an adverse effect on the general layout?

[waterplea]

If drop-downs are positioned properly after this change and the page scrolls fine too — then there are no adverse effects 🙂