I’m reviewing some screens of a system and I came across a problem. The old page was made using the tag for styling, but it had several nested tags, maintenance was unsustainable.
I decided to migrate the screen to bootstrap using the classes to keep the default page, in addition, I kept the default sizes (height and width) from the previous page, since I cannot change this default.
After completing the stylization I came across this problem, during printing, the page does not completely occupy the printing sheet. I’ve tried numerous alternatives and none of them worked, I find myself at a dead end and I don’t want to return all the work to square 0.
For contractual reasons I cannot paste the code here, but I will try to put a part of it as an illustration.
.style3 {
font-size: xx-small;
}
.style4 {
font-size: x-small;
font-weight: bold;
}
.borda {
border-bottom: 1px solid;
border-left: 1px solid;
border-top: 1px solid;
border-right: 1px solid;
border-color: #808080 !important;
}
.style8 {
font-size:small;
font-family: Arial;
height: 4px;
}
.row15 {
font-size: xx-small;
min-height: 15px;
max-height: 15px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="d-flex flex-column justify-content-center text-center borda" style="height:115px;width:120px;">
<strong class="style3">NOTA FISCAL CANCELADA</strong>
</div>
<div class="borda" style="height:115px;width:375px;">
<div class="row m-0">
<div class="col-sm-12 text-center">
<p><label Style="font-size: small"></label></p>
</div>
</div>
<div class="row m-0">
<div class="col-sm-12 text-center">
<p><label Style="font-size: medium">Secretaria Municipal da Fazenda</label></p>
</div>
</div>
<div class="row m-0">
<div class="col-sm-12 text-center">
<span style="font-size: medium;">Nota Fiscal Eletrônica de Serviço</span>
</div>
</div>
<div class="row m-0">
<div class="col-sm-12 text-center">
<span class="style3"> Município:
<label>PRAIA LINDA</label>
Código: <label>9</label>
UF: <label>BA</label>
Código: <label>31</label>
</span>
</div>
</div>
</div>
<div class="borda style3" style="height:115px;width:210px;">
<div class="row m-0 mt-2">
<div class="col-sm-12 p-0 pl-1 text-left" style="height:26px;">
Data/Hora:
<label class="style3"></label>
</div>
</div>
<div class="row m-0">
<div class="col-sm-12 p-0 pl-1 text-left" style="height:26px;">
Nº da Nota:
<label class="style3">12</label>
<label cssClass="style3">0</label>
</div>
</div>
<div class="row m-0">
<div class="col-sm-12 p-0 pl-1 text-left" style="height:26px;">
Ass. Digital:
<label>3315646564</label>
</div>
</div>
<div class="row m-0">
<div class="col-sm-12 p-0 pl-1 text-left" style="height:26px;">
Forma de Pagamento:
<label>VISTA</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="d-flex flex-column justify-content-center text-center borda" style="height:112px;width:120px;">
<strong class="style3">NOTA FISCAL CANCELADA</strong>
</div>
<div class="borda" style="height:112px;width:585px;padding:1.5px;">
<div class="row m-0">
<div class="col-sm-12 text-center" style="background-color:#80ff80;">
<strong class="style8">PRESTADOR DO SERVIÇO</strong>
</div>
</div>
<div class="row m-0">
<div class="col-sm-12 p-0 pl-1 row15">
Nome/Razão Social:
<label>AAAAAAAA</label>
</div>
</div>
<div class="row m-0">
<div class="col-sm-12 p-0 pl-1 row15">
Nome Fantasia:
<label style="Width:384px;">AAAAA</label>
Aliq.:<label></label>
</div>
</div>
<div class="row m-0">
<div class="col-sm-12 p-0 pl-1 row15">
Endereço:
<label style="Width:405px">RUA A</label>
CEP:
<label>44444-444</label>
</div>
</div>
</div>
</div>
</div>
2
Answers
Try changing the width of columns in % instead of px like this:
I made the size as the maximum that an A4 paper would allow in one page.