Element absolute inside div relative inside display table not show element complety - html

Question

I'm trying show a modal in middle of the page with a width or hight dyç
I have a div with style absolute inside div with position relative, and the button not show completely,
I try to change z-index.
link of my code https://jsfiddle.net/renatoclt/qhn9v2py/3/
Here is my HTML & CSS
.ngx-utilitario-modal {
display: table;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
z-index: 1000;
overflow-y: auto;
margin-top: 15px;
}
.ngx-utilitario-modal .ngx-utilitario-modal-body {
display: table-cell;
vertical-align: middle;
padding: 0;
margin: 0;
width: fit-content;
height: fit-content;
overflow-y: auto;
}
.ngx-utilitario-modal .ngx-utilitario-modal-content {
background: #fff;
margin: 0 auto;
width: fit-content;
height: fit-content;
max-height: 100%;
overflow-y: auto;
padding: 15px;
}
.ngx-utilitario-modal .ngx-utilitario-modal-content .ngx-utilitario-modal-cerrar {
opacity: 1;
font-size: 18px;
position: absolute;
top: -30px;
right: -30px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 100%;
-moz-border-radius: 100%;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
padding: 0px;
}
.ngx-utilitario-modal-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.75;
z-index: 900;
animation-delay: 2s;
}
<div class="ngx-utilitario-modal">
<div class="ngx-utilitario-modal-body">
<div class="ngx-utilitario-modal-content">
<div style="position: relative;">
<button type="button" class="ngx-utilitario-modal-cerrar" (click)="close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div>
este es ng-content
</div>
</div>
</div>
</div>
<div class="ngx-utilitario-modal-background" [#openClose]="showModal"></div>
<div class="ngx-utilitario-modal-open"></div>
The result actually shows half of the button. I expect to show the button completely

Answer 1

On your .ngx-utilitario-modal .ngx-utilitario-modal-content class, you should remove overflow-y: auto;
Then you'll likely need to adjust the width of the modal to make it not be 100% so the close button isn't cut off on the sides.
Something like this:
.ngx-utilitario-modal{
display: table;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
z-index: 1000;
overflow-y: auto;
margin-top: 15px;
}
.ngx-utilitario-modal .ngx-utilitario-modal-body {
display: table-cell;
vertical-align: middle;
padding: 0;
margin: 0;
width: fit-content;
height: fit-content;
overflow-y: auto;
}
.ngx-utilitario-modal .ngx-utilitario-modal-content{
background: #fff;
margin: 0 auto;
width: fit-content;
height: fit-content;
max-height: 100%;
padding: 15px;
width: 80%;
}
.ngx-utilitario-modal .ngx-utilitario-modal-content .ngx-utilitario-modal-cerrar{
opacity: 1;
font-size: 18px;
position: absolute;
top: -30px;
right: -30px;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 100%;
-moz-border-radius:100%;
box-shadow:0px 1px 2px rgba(0,0,0,0.2);
padding: 0px;
}
.ngx-utilitario-modal-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.75;
z-index: 900;
animation-delay: 2s;
}
<div class="ngx-utilitario-modal">
<div class="ngx-utilitario-modal-body">
<div class="ngx-utilitario-modal-content">
<div style="position: relative;">
<button type="button" class="ngx-utilitario-modal-cerrar" (click)="close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div>
este es ng-content
</div>
</div>
</div>
</div>
<div class="ngx-utilitario-modal-background" [#openClose]="showModal"></div>
<div class="ngx-utilitario-modal-open"></div>

Answer 2

You can't use overflow: auto if you want this to work. Overflow would have to be set to visible.