CSS defaults when printing

Asked

Viewed 169 times

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>

It has only the alignments and the widths of the columns. When I see it on the screen, it’s okay, if I send it right to the printer, it ignores the width of the columns. col-md-8 and col-md-4, feels as if it were col-md-12.

What to do?

css css3 twitter-bootstrap

  • a hint, change the style="text-align:center" by bootstrap class text-center, is cleaner the code apparently also missing close the div "container"

  • div is closed in original code. I made the changes and did not solve

1 answer

3


About your problem there is nothing in the official documentation, but apparently the columns col-* are all 100% wide, one way to fix this would be to create a unique CSS in at-rule @print to treat 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 of use: 

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

Image using the above example:

inserir a descrição da imagem aqui

Tips

In the Bootstrap documentation there are not many references about adjustments for printing. They report a bug that might appear in Safari with the font size

And they offer some classes to be able to change the display of the element at the time of printing https://getbootstrap.com/docs/4.1/utilities/display/#display-in-print

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 above classes you can for example show or hide some element only in print.

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

Simulate printing in the browser: In this answer there are some tips on how you can simulate the print layout directly in the browser by Chrome Devtools Print page with Background

Browser other questions tagged css css3 twitter-bootstrap

You are not signed in. Login or sign up in order to post.