3

Montando um sistema de OS simples, sem BD, coloquei na página HTML alguns campos para preenchimento, e ao final um botão para imprimir, o problema acontece que na tela antes de pedir para fazer a impressão os campos estão alinhados, quando abre a janela de impressão alguns campos ficam desalinhado, teria como resolver?

Segue código:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Página Administrativa">
    <meta name="author" content="Cesar">
    <link rel="icon" href="imagens/favicon.ico">

    <title>Cadastro OS</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="css/theme.css" rel="stylesheet">
    <link href="css/caixa.css" rel="stylesheet">
    <script src="js/ie-emulation-modes-warning.js"></script>
  </head>


  <body role="document">

    <div class="container theme-showcase" role="main">      
      <div class="page-header">
        <h1></h1>
      </div>
      <center><h3>Dados do cliente:</h3></center>
      <div class="row">
        <div class="col-md-12">
          <form class="form-horizontal">

              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Cliente</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" name="nome" placeholder="Nome Completo">
                </div>
              </div>

              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Endereço</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" name="endereço" placeholder="Digite o endereço">
                </div>
              </div>

              <div class="form-group">
                <label for="number"  type="number" class="col-sm-2 control-label">Telefone</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" name="telefone" placeholder="Digite o telefone">
                </div>
                </div>

                <div id="caixa">
                <div class="form-group">
                <label for="comment">Descrição</label>
                <textarea class="form-control col-sm-1" rows="10" id="comment"></textarea>
                </div>
                </div>

              <div class="form-group" inline="block">
                <div class="col-sm-offset-2 col-sm-10">
                  <input type="reset" class="btn btn-success" value="Nova OS"></button> <button type="submit" class="btn btn-primary" onclick="window.print()">Imprimir</button>
              </div>
              </div>
            </form>
        </div>
        </div>
    </div> <!-- /container -->

  </body>
</html>

2 Respostas 2

3

Bacana, pela sua descrição, é possível perceber que o comportamento é normal quando não adaptamos a responsividade do site para suas diversas situações.

Sendo objetivo, a utilização de media types para o controle do comportamento dos elementos para impressão seja adequada.

A utilização das media queries facilitam muito o trabalho para a adequação destes comportamentos responsivos. Gostaria de recomendar um artigo muito esclarecedor no "Tabless" que explica muito bem o por que da utilizam e exemplos claros de como se utilizar.

Utilizando media queries

Espero que tenha ajudado, creio que não terá dificuldade para implementar, pois é necessário somente fazer a declaração da media querie na sua folha de estilização e adicionar o comportamento que deseja aos elementos quando for imprimir, seja esconder um menu ou uma div.

2

Alguns campos não possuem o 'col-sm-*' respectivos avalie o seu layout e adicione corretamente. Por exemplo em Descrição parece estar faltando o class dele. Em outros items de html há alguns possíveis erros que não atrapalham o layout, mas se estiver verificando tipos e atributos de tags pode vir a ser uma dor de cabeça.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .