Ir para conteúdo

POWERED BY:

Hamilcar

Bootstrap e imprimir

Recommended Posts

Estou usando o bootstrap 4, tenho um script que abre a página de impressão:

<script>
            window.onload = function () {
                var imprimir = document.querySelector("#imprimir");
                imprimir.onclick = function () {
                    var usuario = document.querySelector("#usuario");
                    var menu = document.querySelector("#menu");
                    var imprime_escala = document.querySelector("#imprime_escala")
                    imprimir.style.display = 'none';
                    usuario.style.display = 'none';
                    menu.style.display = 'none';
                    imprime_escala.style.display = 'none';
                    window.print();

                    var time = window.setTimeout(function () {
                        imprimir.style.display = 'block';
                        usuario.style.display = 'block';
                        menu.style.display = 'block';
                        imprime_escala.style.display = 'block';
                    }, 1000);
                }
            }
        </script>

e notei que antes de atualizar para o bootstrap 4, a página de impressão que se abria para impressão de pdf, tinha a aba para escolher entre paisagem ou retrato, e agora não aparece, alguém já passou por isso e conseguiu resolver?

 

 

Sem título.png

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 hora atrás, Public2004 disse:

@Hamilcar Boas, não vejo nenhuma relação com o Bootstrap ou versão do mesmo e sim, grande possibilidade do navegador ou driver de impressão terem sido atualizados.

 

Ab

Mas é o bootstrap, pois quando tiro ele, volta a aparecer paisagem, e é como falei, depois que atualizei ficou desta maneira.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por clovis.sardinha
      Como fazer para colocar um spinner antes de carregar os dados do bd? Eu clico no link e entra na função do controle e só vai para a página da views quando já está pronto a query. Vi uns exemplos de colocação de spinner, mas se a página ainda não apareceu como faço? Vou anexar a função que chama a página para facilitar. 
      public function inativos()  {     $session = \Config\Services::session();     $pager = \Config\Services::pager();     $usuarios=$this->usuarios->getInativos();//faz a query no bd.     $dados=[         'usuarios'=>$usuarios,         'pager'=>$this->usuarios->pager,     ];     echo view('Admin/Relatorios/listaInativos',$dados); }   
    • Por gabrielpaiva2
      Gostaria de centralizar o card 1,2 e 3 e colocar o 4 e 5 em baixo, que tipo de alteração faço 
      algo como na img         Cards Projeto (codepen.io)
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"> <script defer src="js/jquery.js"></script> <script defer src="js/script.js"></script> <script defer src="js/script-form-list.js"></script> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <link rel="stylesheet" href="./css/style.css"> <title>TITULO</title> </head> <body> <!--cabeçalho:logo,menu,login--> <header> <div class="logo"> <i><img src="" alt="Image" height="460" width="520"></i> </div> <div> <nav id='menu'> <nav class="cabeçalho-link"> <a href='item1.html'><button>Base</button></a> <a href='item1.html'><button>Sobre</button></a> <a href='item1.html'><button>Contatos</button></a> <a href='item1.html'><button>Planos</button></a> <div class="icones"> <a id='iconLogin' class="fa-sharp fa-solid fa-users-line"></a> </div> <section id='login'> campo login <a id='fecharLogin'>X</a> </section> </nav> </div> </header> <main> <section class="main-content"> <div class="container"> <h1 class="page-title text-center">Equipe<b></b></h1> <div class="row"> <div class="col-md-3 col-sm-4"> <div class="card"> <div class="card_cover"> </div> <div class="card_padding"> <div class="card_image"> <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg" alt=""> </div> <div class="card_details"> <h3>NOME1</h3> <p class="text">Função</p> </div> <div class="card_social"> <a href=#!> <img src="./imagens/card/social/linkedin.png" alt="Linkedin"> </a> <a href=> <img src="./imagens/card/social/github.png" alt="Twitter"> </a> </div> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="card"> <div class="card_cover"> </div> <div class="card_padding"> <div class="card_image"> <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg" alt=""> </div> <div class="card_details"> <h3>NOME2</h3> <p class="text">Função</p> </div> <div class="card_social"> <a href=#!> <img src="./imagens/card/social/linkedin.png" alt="Linkedin"> </a> <a href=> <img src="./imagens/card/social/github.png" alt="Twitter"> </a> </div> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="card"> <div class="card_cover"> </div> <div class="card_padding"> <div class="card_image"> <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg" alt=""> </div> <div class="card_details"> <h3>NOME3</h3> <p class="text">Função</p> </div> <div class="card_social"> <a href=#!> <img src="./imagens/card/social/linkedin.png" alt="Linkedin"> </a> <a href=> <img src="./imagens/card/social/github.png" alt="Twitter"> </a> </div> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="card"> <div class="card_cover"> </div> <div class="card_padding"> <div class="card_image"> <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg" alt=""> </div> <div class="card_details"> <h3>NOME4</h3> <p class="text">Função</p> </div> <div class="card_social"> <a href=#!> <img src="./imagens/card/social/linkedin.png" alt="Linkedin"> </a> <a href=> <img src="./imagens/card/social/github.png" alt="Twitter"> </a> </div> </div> </div> </div> <div class="col-md-3 col-sm-4"> <div class="card"> <div class="card_cover"> </div> <div class="card_padding"> <div class="card_image"> <img src="https://png.pngtree.com/element_our/png_detail/20181130/web-search-vector-icon-png_253149.jpg" alt=""> </div> <div class="card_details"> <h3>NOME5</h3> <p class="text">Função</p> </div> <div class="card_social"> <a href=#!> <img src="./imagens/card/social/linkedin.png" alt="Linkedin"> </a> <a href=> <img src="./imagens/card/social/github.png" alt="Twitter"> </a> </div> </div> </div> </div> </section> </main> <div id='muleta'></div> <footer class="w-100 py-4 flex-shrink-0"> <div class="container py-4"> <div class="row gy-4 gx-5"> <div class="col-lg-4 col-md-6"> <h5 class="h1 text-white">PS</h5> <p class="small text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> <p class="small text-muted mb-0">&copy; Copyrights. All rights reserved. <a class="text-primary" href="#">Bootstrap</a></p> </div> <div class="col-lg-2 col-md-6"> <h5 class="text-white mb-3">Informações</h5> <ul class="list-unstyled text-muted"> <li><a href="#">Home</a></li> <li><a href="#">Sobre</a></li> <li><a href="#">Contato</a></li> <li><a href="#">Planos</a></li> </ul> </div> <div class="col-lg-2 col-md-6"> <h5 class="text-white mb-3">Categorias</h5> <ul class="list-unstyled text-muted"> <li><a href="#">Home</a></li> <li><a href="#">Contato</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">#</a></li> </ul> </div> <div class="col-lg-4 col-md-6"> <h5 class="text-white mb-3">Newsletter</h5> <p class="small text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> <form action="#"> <div class="input-group mb-3"> <input class="form-control" type="text" placeholder="Email" aria-label="Recipient's username" aria-describedby="button-addon2"> <button class="btn btn-primary" id="button-addon2" type="button"><i class="fas fa-paper-plane"></i></button> </div> </form> </div> </div> </div> </footer> </div> </body> </html> * { padding: 0; margin: 0; } header { width: 100%; height: 120px; background-color: #010138; position: absolute; } header .logo { color: black; font-size: 1px; font-weight: bolder; } header .logo i { color: black; } header div { width: 70%; left: 0; right: 0; margin: auto; } /* este é o cabeçalho todas as configurações de posições das opções para os usuarios estão aqui*/ header .logo { color: black; font-size: 1px; font-weight: bolder; } header .logo i { color: black; } header .cabeçalho-link { padding-left: 100px; cursor: pointer; gap: 3rem; display: flex; padding-top: 20px; font-weight: 500; border-radius: 5rem; color: aliceblue; } header .cabeçalho-link a { color: rgb(255, 255, 255); font-size: 20px; border-radius: 4rem; font-size: 1.7rem; } button { background-color: #FFCC15; color: rgb(0, 0, 0); padding: 5px; width: 150px; border-radius: 15px; font-size: 15px; cursor: pointer; } /* margem e bordas modificadas, para possuir um formato mais oval, incluindo aqui também a cor preta para as letras*/ button:hover { background-color: rgb(99, 78, 0); color: #FFCC15; } /* quando o usuario passar o cursor em cima de cada opção, ele mudará de cor*/ .logo { /*para pode adicionar a logo do meu site*/ height: 100px; width: 60px; padding-top: 49px; padding-left: 720px; padding-right: 220px; display: inline-flex; justify-content: center; text-align: center; align-items: center; cursor: pointer; } .icones { height: 100px; cursor: pointer; gap: 1rem; display: flex; border-radius: 5rem; } header .icones i, header .icones a { cursor: pointer; height: 4.5rem; width: 4.5rem; text-align: center; font-size: 40px; border-radius: 50%; padding: 5rem, 1.5rem; line-height: 4.5rem; } header .icones i:hover, header .icones a:hover { transform: rotate(360deg); border-radius: 20px; transition: 0.5s all; } .sobre .row .content .icones-container .icones span { font-size: 1.5rem; color: var(black); } #iconLogin { float: right; color: white; background: #0D0A97; } #login { display: none; position: fixed; background: white; top: 70px; right: 15%; width: 100px; height: 100px; } /* CARDS */ .main-content { margin: 50px auto; margin-top: 0; padding: 80px; max-width: 1350px; background: #fff; -webkit-box-shadow: 0 20px 100px -15px rgba(0, 0, 0, 0.1); box-shadow: 0 20px 100px -15px rgba(0, 0, 0, 0.1); } .page-title { font-size: 45px; margin: 0 auto 80px auto; margin-top: 150px; } .page-title:after { content: ""; width: 110px; height: 4px; background: #F39745; display: block; margin: 15px auto 0 auto; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .card { background: #fff; -webkit-box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); text-align: center; margin-bottom: 30px; border-radius: 10px; } .card .card_cover { height: 130px; overflow: hidden; background-color: #27408B; } .card .card_padding { padding: 25px; position: relative; margin-top: -85px; } .card .card_image { width: 125px; height: 125px; border-radius: 125px; overflow: hidden; border: 4px solid #FFCC15; margin: 0 auto 15px auto; -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); } .card .card_image img { width: 125px; height: 125px; -o-object-fit: cover; object-fit: cover; } .card .card_details h3 { font-size: 21px; } .card .card_details p { font-size: 16px; margin-bottom: 15px; } .card .card_social { text-align: center; } .card .card_social a { display: inline-block; } .card .card_social img { width: 33px; margin: 5px 10px; } /* SLIDE CARD */ /* FOOTER */ #muleta { clear: both; } footer { background-color: #010138; } footer a { color: black; text-decoration: none; transition: all 0.3s; } .form-control { background: #212529; border-color: #545454; } .form-control:focus { background: #212529; } @media (max-width:768px) { header .cabeçalho-link { display: list-item; } header .icones { display: list-item; } header .logo { display: auto; max-width: 200px; margin: auto; } header .backgroundFoto { max-width: 200px; margin: auto; } }  

    • Por Cícero Antônio
      Olá pessoal
       
      Migrei recentemente para um novo provedor e não consigo carregar o BOOTSTRAP de forma interna. Só consigo carregar através do link externo.
       
      Assim não consigo carregar:
      <link rel="stylesheet" href="https://www.meusite.com/assets/bootstrap/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      Assim eu consigo:
       
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> Alguém já passou por isso?
       
      O caminho interno está correto; o arquivo está onde deveria estar; em outro provedor estava funcionando normalmente. Atualmente precisei migrar o site para o provedor HostGator e agora me apresentou esse problema. 
       
      Se alguém já tiver passado por isso e tiver uma solução eu agradeço.
       
    • Por asacap1000
      Salve galera.
      Tenho uma página com vários box deste abaixo com a descrição de uma TV que temos na empresa onde mostram os status de diversos processos.
      Ainda não coloquei o link para o direcionamento porém antes da pessoa clicar eu gostaria que quando posicionasse o mouse em cima do botão aparecesse uma miniatura do site destino.
      é Possivel isso?? eu tentei o mouseover mas não carregou, 
       
                  <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-blue-gradient" style="border-radius: 05px 05px;">
                      <div class="inner">
                        <h3 align="center"><?=$qtd_veiculos?></h3>
                        <p align="center">VEÍCULOS EM TRÂNSITO</p>
                      </div>
                    </div>
                  </div>
       
    • Por leonardorafaeldev
      Boa noite pessoal estou com um problema que o icone do meu site não aparece no mobile segue uma foto do problema o meu codigo esta assim
       
      <!-- icones -->   <link href="icones/favicon.ico" rel="icon">   <link href="icones/favicon.ico" rel="shortcut icon">    <link rel="apple-touch-icon" sizes="57x57" href="icones/apple-icon-57x57.png">   <link rel="apple-touch-icon" sizes="60x60" href="icones/apple-icon-60x60.png">   <link rel="apple-touch-icon" sizes="72x72" href="icones/apple-icon-72x72.png">   <link rel="apple-touch-icon" sizes="76x76" href="icones/apple-icon-76x76.png">   <link rel="apple-touch-icon" sizes="114x114" href="icones/apple-icon-114x114.png">   <link rel="apple-touch-icon" sizes="120x120" href="icones/apple-icon-120x120.png">   <link rel="apple-touch-icon" sizes="144x144" href="icones/apple-icon-144x144.png">   <link rel="apple-touch-icon" sizes="152x152" href="icones/apple-icon-152x152.png">   <link rel="apple-touch-icon" sizes="180x180" href="icones/apple-icon-180x180.png">   <link rel="icon" type="image/png" sizes="192x192"  href="icones/android-icon-192x192.png" >   <link rel="icon" type="image/png" sizes="36x36" href="icones/android-icon-36x36.png">   <link rel="icon" type="image/png" sizes="48x48" href="icones/android-icon-48x48.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/android-icon-96x96.png">   <link rel="icon" type="image/png" sizes="144x144" href="icones/android-icon-144x144.png">   <link rel="icon" type="image/png" sizes="72x72" href="icones/android-icon-72x72.png">   <link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/favicon-96x96.png">   <link rel="icon" type="image/png" sizes="16x16" href="icones/favicon-16x16.png">   <link rel="manifest" href="icones/manifest.json">   <meta name="msapplication-TileColor" content="#ffffff">   <meta name="msapplication-TileImage" content="icones/ms-icon-144x144.png">   <meta name="theme-color" content="#ffffff">   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1.0" name="viewport">
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.