Problem printing fields

Question

Problem printing fields

Navigation

#1 by (3 votes)
#2 by (2 votes)

3

Setting up a simple OS system without BD, I put a few fields to fill in the HTML page, and at the end a button to print, the problem is that on the screen before asking to print the fields are aligned, when it opens the print window some fields get misaligned, would have how to solve?

Follow the code below:

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

asked by anonymous 10.12.2016 / 23:42

2 answers

2

Some fields do not have the respective col-sm- * 'evaluate your layout and add correctly. For example, Description appears to be missing its 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 it can turn out to be a headache.

11.12.2016 / 06:55

Find the angle between 2 vectors in 3d How to call a View passing parameters through json

score 3 · Accepted Answer

Fancy, by its description, it is possible to realize that the behavior is normal when we do not adapt the responsiveness of the site to its diverse situations.

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

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

Using average queries

I hope it has helped, I believe that it will not be difficult to implement, because it is only necessary to make the statement of the media want on your styling sheet and add the behavior you want to the elements when you print, either hide a menu or a div .