Layout for printing directly on the website

Asked

Viewed 81 times

-2

I’m trying to make the impression of a page I created. When I do the visualization for printing the layout looks like the figure below:

inserir a descrição da imagem aqui

But when I go to make the impression it’s coming out like this:

inserir a descrição da imagem aqui

The code below shows how the page layout was assembled:

<body>
    <form id="mainForm" runat="server">

       <div class="container">

           <nav class="navbar navbar-default" style="margin-top:20px">
                <div class="container-fluid">
                    <ol class="breadcrumb">
                        <li><a href="https://www.myweg.net/irj/portal"><span class="glyphicon glyphicon-home"></span><span> </span>Portal WEG</a></li>
                        <ul class="nav navbar-nav navbar-right">

                            <li style="padding-right:15px"><span class="glyphicon glyphicon-user" style="color:  #777"></span></li>
                            <li style="padding-right:15px"><span id="UserName" style="color:  #777"></span>
                            </li> </ul>

                    </ol>               
                    <div class="navbar-header">
                        <span id="pageTitle" class="navbar-brand" style="vertical-align:bottom;padding-bottom:0px">Registro de Autorização de Pagamento</span></div>                
                        <ul class="nav navbar-nav navbar-right">                                                            
                            <li><a href="http://www.weg.net"><img src="../SiteAssets/Imagens/weg.png" width="60px" alt="" /></a>
                            </li>               
                        </ul>                                       
                </div>
           </nav> 


        <div class="panel-group">

            <div class="panel panel-default">

                <div class="panel-heading" data-toggle="collapse" data-target="#collapseMainPanel">
                    <h4 class="panel-title accordion-toggle">Autorização de Pagamento</h4>
                </div>

                    <div id="collapseMainPanel" class="panel-collapse collapse in">

                        <div class="panel-body" id="Panel1">

                             <div class="col-sm-4">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Debitar a:</span>
                                    <span class="form-control" id="ImpDebitar" />
                                </div>
                             </div>

                             <div class="col-sm-8">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Local:</span>
                                    <span class="form-control" id="ImpLocal" />
                                </div>
                             </div>

                             <div class="col-sm-4">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Conta Contábil:</span>
                                    <span class="form-control" id="ImpContaContabil" />
                                </div>
                             </div>

                             <div class="col-sm-4">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Centro de Custo:</span>
                                    <span class="form-control" id="ImpCentroCusto" />
                                </div>
                             </div>

                             <div class="col-sm-4">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Modalidade de Pagamento:</span>
                                    <span class="form-control" id="ImpModPag" />
                                </div>
                             </div>

                             <div class="col-sm-4">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Valor:</span>
                                    <input type="text" class="form-control" id="ImpValor"/>
                                </div>
                             </div>

                            <div class="col-sm-12">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Por Extenso:</span>
                                    <span class="form-control" id="ImpExtenso"/>

                                </div>
                             </div>

                            <div class="col-sm-4">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Banco:</span>
                                    <span class="form-control" id="ImpBanco"/>

                                </div>
                             </div>

                            <div class="col-sm-4">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Agência:</span>
                                    <span class="form-control" id="ImpAgencia"/>

                                </div>
                             </div>

                            <div class="col-sm-4">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Conta Corrente:</span>
                                    <span class="form-control" id="ImpCC"/>

                                </div>
                             </div>

                            <div class="col-sm-12">
                                <div class="input-group">                               
                                    <span class="input-group-addon">A Firma:</span>
                                    <span class="form-control" id="ImpFirma"/>

                                </div>
                             </div>

                            <div class="col-sm-8">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Cidade:</span>
                                    <span class="form-control" id="ImpCidade"/>

                                </div>
                             </div>

                            <div class="col-sm-4">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Estado:</span>
                                    <span class="form-control" id="ImpEstado"/>

                                </div>
                             </div>

                             <div class="col-sm-8">
                                <div class="input-group">                               
                                    <span class="input-group-addon">CPF/CNPJ:</span>
                                    <span class="form-control" id="ImpCPFCNPJ"/>

                                </div>
                             </div>

                             <div class="col-sm-4">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Em Data:</span>
                                    <span class="form-control" id="ImpData"/>

                                </div>
                             </div>

                             <div class="col-sm-12">
                                <div class="input-group">                               
                                    <span class="input-group-addon">Relativo a:</span>
                                    <span class="form-control" id="ImpRelativo"/>

                                </div>
                             </div>

                            <div class="col-sm-3">
                                    <span class="text-info">Solicitante:</span>
                                    <span class="form-control-static" id="ImpSolicitante">Teste</span>
                            </div>

                            <div class="col-sm-6">
                                    <span class="text-info">Local e Data:</span>
                                    <span class="form-control-static" id="ImpLocalData">Teste2</span>
                             </div>


                            <div class="col-sm-6">
                                <div>
                                    <span class="text-info">___________________________________________</span>
                                </div>

                                <div>
                                    <span class="form-control-static" id="ImpLocalData">Seção Tesouraia</span>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div>
                                    <span class="text-info">___________________________________________</span>
                                </div>

                                <div>
                                    <span class="form-control-static" id="ImpLocalData">Assinatura</span>
                                </div>
                            </div>





                        </div>
                    </div>
            </div>
        </div>
    </div>

How can I solve this problem?

  • 1

    Without the code, there’s no point

  • You need CSS too if possible. But you’ll probably have to do a @print treatment to adapt your CSS for printing. Something else. Usually the colors and images used in the Background are not recognized by the printer. You’ll have to use some technique to treat it and not get all white

  • I didn’t actually treat anything in CSS.

1 answer

0


You are using Bootstrap and in your form you are dividing the fields into multiple columns, but when dividing the columns you are using the class:

col-sm-x

The class col-sm will make your layout be divided into devices with screen larger than 768 pixels. For you to force the layout to remain the same regardless of the screen size you can use

col-xs-x

To better understand the Bootstrap grids system you can access that link

Browser other questions tagged

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