Printable layout

-2

I'm trying to print a page I created. When I make the print preview the layout looks like the picture below:

ButwhenIgotoprint,itworkslikethis:

Thecodebelowshowshowthepagelayoutwascreated:

<body><formid="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 resolve this problem?

    
asked by anonymous 14.02.2018 / 13:17

1 answer

0

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

col-sm-x

The col-sm class will make your layout split into devices with a 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 this link

    
14.02.2018 / 14:34