I'm currently utilizing Angular Material within my Angular application. One issue I am facing is the excessive whitespace at the bottom of a dialog that displays information about a post. How can I reduce or eliminate this unnecessary space?
Take a look at the following image:
https://i.stack.imgur.com/VDN6y.png
HTML Code Snippet
<div id="postModal">
<div mat-dialog-content id="postForm">
<div class="bigImage">
<img src={{imageLinks[0]}} class="postImage"/>
</div>
</div>
</div>
SCSS Code Snippet
body{
position: relative;
}
.postImage{
height: 80%;
width: 100%;
}
.bigImage{
text-align: center;
display: block;
}
#postForm{
height: 80vh;
width: 100%;
display: box;
}
mat-dialog-container{
padding-right: 30px;
padding-left: 30px;
padding-top: 10px !important;
padding-bottom: 0px !important;
}