I have a website where I use a modal to open PDF, and the same one when opened is very small. Has anyone ever experienced this? Would you know a way to fix it?
CSS Code Modal:
.modal.modal-fullscreen .modal-dialog,
.modal.modal-fullscreen .modal-content {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.modal.modal-fullscreen .modal-dialog {
margin: 0;
width: 100%;
animation-duration:0.6s;
}
.modal.modal-fullscreen .modal-content {
border: none;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
-o-box-shadow: inherit;
box-shadow: inherit;
/* change bg color below */
/* background:#1abc9c; */
}
.modal.modal-fullscreen.force-fullscreen .modal-body {
padding: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header,
.modal.modal-fullscreen.force-fullscreen .modal-footer {
left: 0;
position: absolute;
right: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-header {
top: 0;
}
.modal.modal-fullscreen.force-fullscreen .modal-footer {
bottom: 0;
}
.close {
float: right;
font-size: 81px;
font-weight: 700;
line-height: 1;
color: red;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
right: 50%;
position: relative;
background: #000 !important;
z-index: 1111111;
}
.close:hover{
color:red;
}
MODAL HTML code:
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<!-- -->
<div class="m-t-40">
<div class="services-icon-bx">
<div class="text-center">
<i class="font-size-60 "><img src="img/icon/tunel.png" style="height:70px; weight:70px;"></i>
<h3 class="heading-sm">Subterrâneo</h3>
<button class="btn btn-c-primary" data-toggle="modal" data-target="#myModalFullscreen5" contenteditable="false">Saber mais</button>
</div>
</div>
</div>
<div class="modal fade modal-fullscreen footer-to-bottom" id="myModalFullscreen5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog animated zoomInLeft">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<iframe src="./docs/tuneis.pdf" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Seu navegador não suporta esse conteudo
</iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
That's how it gets when you load: