Discussion on Dasha - Bootstrap 4 Admin Template

Hi @themicon,

I'm building custom angular4 dropdown component which needs to append it's options element for the dropdown directly into the body and it will calculate an absolute positioning of options element by taking the position of it's parent element but I've discovered that it's not working as it should due to constraints of some of the CSS classes attached to the parent container elements as ".layout-container" and ".main-container" typically it breaks because of this styles as when I remove these classes the positioning works fine:

.layout-container {
position: relative;
width: 100%;
height: 100%;
}

and

.main-container {
position: relative;
height: calc(100% - 60px);
overflow: auto;
-webkit-overflow-scrolling: touch;
}

You can replicate this issue with an example from "Append to body" section under https://valor-software.com/ngx-bootstrap/index-bs4.html#/dropdowns

Or just copy and paste the following code into your page component:

<div class="btn-group" dropdown container="body">
<button dropdownToggle type="button" class="btn btn-primary dropdownToggle">
Dropdown on Body <span class="caret"></span>
</button>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
</li>
</ul>
</div>

Any suggestion would be highly appreciated as this is very desired functionality which is provided by most of third party libraries to dynamically append elements to the body.

Regards,
Anton