Problem when printing fields

Asked

Viewed 52 times

3

Putting together a simple OS system, without BD, I put on the HTML page some fields to fill, and at the end a button to print, the problem happens that on the screen before asking to print the fields are aligned, when you open the print window some fields are misaligned, you could solve?

Follows code: 

<!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>
javascript html

2 answers

3


Nice, by its description, it is possible to notice that the behavior is normal when we do not adapt the responsiveness of the site to its various situations.

Being objective, the use of media types to control the behavior of elements for printing is appropriate.

The use of media queries greatly facilitate the work for the adequacy of these responsive behaviors. I would like to recommend a very enlightening article in the "Tabless" that explains very well why they use it and clear examples of how to use it.

Utilizing media queries

I hope you helped, I think you will have no difficulty to implement, because it is only necessary to make the media querie statement on your styling sheet and add the behavior you want to the elements when printing, either hide a menu or a div.

2

Some fields do not have the respective col-Sm-*evaluate their layout and add correctly. For example in Description seems to be missing his class. In other html items there are some possible errors that do not disturb the layout, but if you are checking tag types and attributes can become a headache.

Browser other questions tagged javascript html

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