CSS unconfigured when printing

Navigation
1

My page looks like this: 

<div class="container">
<div class="row">
    <div class="col-sm-12 col-md-12" style="border-style:solid;">
        <div style="text-align:center;" class="col-sm-12 col-md-12">
            <img style="text-align:center;" src="../uploads/logo.jpg" />
            <h4 style="text-align:center;">GUIA DE AGENDAMENTO</h4>
        </div>
        <div style="text-align:center;" class="col-sm-8 col-md-8">
            <p style="text-align:center;">
                Data de Atendimento<br/>{{date('d/m/Y', strtotime($marcacao->data))}}<br/><br/>
                Profissional<br/>{{$marcacao->agenda->vinculo->profissional->nome}}
            </p>
        </div>
        <div style="text-align:center;" class="col-sm-4 col-md-4">
            <p style="text-align:center;">
                Horário<br/>{{$marcacao->agenda->horario}}<br/><br/>
                Especialidades<br/>{{$marcacao->agenda->vinculo->funcao}}
            </p>
        </div>
    </div>
    <div class="col-sm-12 col-md-12" style="border-style:solid;">
        <div style="text-align:center;" class="col-sm-12 col-md-12">
            <h4 style="text-align:center;">Paciente: {{$marcacao->cidadao->nome}}</h4>
        <div style="text-align:center;" class="col-sm-4 col-md-4">
            <p style="text-align:center;">
                CADSUS<br/>{{$marcacao->cidadao->cns}}
            </p>
        </div>
        <div style="text-align:center;" class="col-sm-4 col-md-4">
            <p style="text-align:center;">
                Telefone<br/>{{$marcacao->cidadao->telefone}}
            </p>
        </div>
        <div style="text-align:center;" class="col-sm-4 col-md-4">
            <p style="text-align:center;">
                Data de Nasc:<br/>{{date('d/m/Y', strtotime($marcacao->cidadao->dataNascimento))}}
            </p>
        </div>
    </div>        
</div>

Only the alignments and widths of the columns. When I look at the screen, it's ok, if I send it straight to the printer, it ignores the width of the columns. col-md-8 and col-md-4 , it looks like col-md-12 .

What to do?

    
asked by anonymous 10.10.2018 / 13:56

1 answer

3

On your problem there is nothing in the official documentation, but it seems that the col-* columns are all 100% wide, one way to fix this would be to create a unique CSS in at-rule @print to handle this.

See this base model: 

@media print {
  .col-print-1 {width:8%;  float:left;}
  .col-print-2 {width:16%; float:left;}
  .col-print-3 {width:25%; float:left;}
  .col-print-4 {width:33%; float:left;}
  .col-print-5 {width:42%; float:left;}
  .col-print-6 {width:50%; float:left;}
  .col-print-7 {width:58%; float:left;}
  .col-print-8 {width:66%; float:left;}
  .col-print-9 {width:75%; float:left;}
  .col-print-10{width:83%; float:left;}
  .col-print-11{width:92%; float:left;}
  .col-print-12{width:100%; float:left;}
}

Example usage: 

<div class="col-md-6 col-print-6 clearfix">coluna com 50% de largura</div>

Image using the example above:

Tips

IntheBootstrapdocumentationtherearenotmanyreferencestosettingsforprinting.Theyreport a bug that may appear in Safari with font size

And offer some classes to be able to change the display of the element at the time of printing link 

d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

Using the classes above you can for example show or hide some element only in the print.

Ex: <div class="d-none d-print-block">Print Only (Hide on screen only)</div>

Simulate printing in the browser: In this response you have some tips on how you can simulate the print layout in the browser by Chrome DevTools Print page with Background

    
10.10.2018 / 14:34
Do not accept duplicate values in a Regular Expression (Regex) Array list in multidimensional array