Boostrap with different views in Chrome and Firefox

Asked

Viewed 151 times

1

I have a dynamic list fill code that in firefox correctly displays the fields, but in Chrome is disorganized, as if boostrap is not working.

Follow the code below

function inserirFormulario(dados) {
  $.ajax({
    //dataType: "json",
    type: "POST",
    data: dados.serialize(),
    url: "../banco/banco-get/pagina-minhas-tarefas/interface-resultado-pesquisa.php",
    cache: false,


  }).done(function(data) {

    var atividades = "";

    console.log(data.length);

    if (data.length == 2) {

      var mensagem = "<strong>Nenhuma tarefa encontrada.</strong>";
      mostraDialogo(mensagem, "danger", 2000);


    }

    $.each($.parseJSON(data), function(chave, valor) {

      //FUNÇÃO PARA FORMATAR AS DATAS QUE VEM DO PHP
      function dataAtualFormatada(parametro) {
        if (parametro == null) {
          parametro = "";
          return parametro;
        } else {
          var data = new Date(parametro),
            dia = data.getDate().toString(),
            diaF = (dia.length == 1) ? '0' + dia : dia,
            mes = (data.getMonth() + 1).toString(), //+1 pois no getMonth Janeiro começa com zero.
            mesF = (mes.length == 1) ? '0' + mes : mes,
            anoF = data.getFullYear();
          return diaF + "/" + mesF + "/" + anoF;
        }
      }


      var vencimento = dataAtualFormatada(valor.DT_VENCIMENTO);
      var inicio = dataAtualFormatada(valor.DT_INICIO);
      var fim = dataAtualFormatada(valor.DT_FIM);


      //CRIANDO AS LINHAS COM OS TD DA TABELA QUE SÃO O RESULTADO NA CONSULTA AO BANCO 

      atividades += '<tr class="' + valor.codigo + '" name="' + valor.STATUS + '">';
      //atividades += '<td>' + valor.codigo + '</td>';
      atividades += '<td class="th-ocultar-responsivo-tbody">' + valor.COD + '</td>';
      atividades += '<td >' + valor.EMPRESAS + '</td>';
      atividades += '<td class="th-ocultar-responsivo-tbody">' + valor.TRIBUTACAO + '</td>';
      atividades += '<td >' + valor.TIPO_ATIVIDADE + '</td>';
      atividades += '<td >' + vencimento + '</td>';
      //atividades += '<td class="th-ocultar-responsivo-tbody">' + inicio + '</td>';
      //atividades += '<td class="th-ocultar-responsivo-tbody">' + fim + '</td>';


      if (valor.STATUS == "INICIADO") {
        atividades += '<td  style="padding:0"><button type="button" class="btn ' + valor.STATUS + ' reabriratividade  colocarstandby css-iniciado " value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      } else if (valor.STATUS == "CONCLUIDO") {
        atividades += '<td style="padding:0"><button type="button" class="btn ' + valor.STATUS + ' reabriratividade  colocarstandby css-concluido " value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      } else if (valor.STATUS == "CONCLUIDO_VENCIDO") {
        atividades += '<td style="padding:0"><button type="button" class="btn ' + valor.STATUS + ' reabriratividade  colocarstandby css-concluido-vencido " value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      } else if (valor.STATUS == "VENCIDO") {
        atividades += '<td style="padding:0"><button type="button" class="btn ' + valor.STATUS + ' reabriratividade  colocarstandby css-vencido " value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      } else if (valor.STATUS == "PENDENTE") {
        atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade  colocarstandby css-pendente " value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      } else if (valor.STATUS == "INICIADO_VENCIDO") {
        atividades += '<td style="padding:0"><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby css-iniciado-vencido " value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      }

      //botão stand_by do status
      else if (valor.STATUS == "STAND_BY") {
        atividades += '<td style="padding:0"><button type="button" class="btn ' + valor.STATUS + ' css-stand-by " value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      }

      //botão reabrir atividade coluna
      atividades += '<td style="padding:0;text-align:center;" class="th-ocultar-responsivo-tbody td-padding"><button type="button" class="btn css-reabrir reabrir-atividade-coluna" name="' + valor.STATUS + '" value="' + valor.codigo + '"><span>R</span></button></td>';

      //botão stand by da coluna
      atividades += '<td style="padding:0;text-align:center;" class="th-ocultar-responsivo-tbody td-padding"><button type="button" class="btn  css-stand-by stand-by-coluna" id="' + valor.codigo + '"  value="' + valor.COD + '"><span>S</span></button></td>';
      //botão inserir detalhes
      atividades += '<td style="padding:0;text-align:center;" class="th-ocultar-responsivo-tbody  td-padding"><button type="button" class="btn css-detalhes botao-detalhes " <a class="" href="#" data-toggle="modal" data-target="#modal-observacoes"><span>D</span></a></button></td>';

      atividades += '</tr>';
    });

    $('#registros-atividades').html(atividades);


  }).fail(function() {


  }).always(function() {


  });
}
.dashboardhover:hover {
  opacity: 0.8;
  cursor: pointer;
}

input#feedback {
  width: 30px;
  height: 30px;
}

input#comunicados {
  width: 30px;
  height: 30px;
}

div#pesquisa form {
  display: inline;
}

div#exibicao {
  padding: 0;
  margin: 0;
  height: 320px;
  overflow-y: scroll;
  cursor: pointer;
  text-align: center;
  width: 100%;
}

div#exibicao table {
  width: 1120px;
}

.td-alinhado-a-esquerda {
  text-align: left;
}

div#exibicao table#resultado-exibicao thead th {
  text-align: left;
}

div#exibicao td {
  text-align: left;
}


/*cabeçalho da lista de atividades*/

.thfixado {
  position: sticky;
  top: -1.5px;
  z-index: 0;
}

.trfixadocampo {
  background-color: white;
  position: sticky;
  top: 25px;
  z-index: 0;
}

button.css-iniciado {
  background-color: rgb(236, 200, 70);
  color: royalblue;
  border: 1px solid gray;
  font-size: 80%;
  width: 100%;
}

button.css-iniciado:hover {
  background-color: rgb(255, 220, 70, 0.3);
  color: rgb(47, 70, 116);
}

button.css-concluido {
  background-color: rgb(86, 137, 73);
  color: white;
  border: 1px solid gray;
  font-size: 80%;
  width: 100%;
}

button.css-concluido:hover {
  background-color: rgb(117, 204, 126);
  color: rgb(255, 255, 255);
}

button.css-concluido-vencido {
  background-color: rgb(106, 83, 157);
  color: white;
  border: 1px solid gray;
  font-size: 80%;
  width: 100%;
}

button.css-concluido-vencido:hover {
  background-color: rgb(150, 120, 157);
}

button.css-vencido {
  background-color: rgb(165, 42, 42);
  color: white;
  border: 1px solid gray;
  font-size: 80%;
  width: 100%;
}

button.css-vencido:hover {
  background-color: rgb(226, 68, 92);
  color: white;
}

button.css-iniciado-vencido {
  background: rgb(196, 95, 49);
  color: white;
  border: 1px solid gray;
  font-size: 80%;
  width: 100%;
}

button.css-iniciado-vencido:hover {
  background: rgb(229, 102, 39);
  color: white;
}

button.css-pendente {
  background-color: royalblue;
  border: 1px solid gray;
  color: white;
  font-weight: bold;
  font-size: 80%;
  width: 100%;
}

button.css-pendente:hover {
  background-color: rgb(119, 181, 239);
  color: white;
}

button.css-stand-by {
  background-color: #424242;
  border: 1px solid gray;
  color: white;
  font-size: 80%;
}

button.css-stand-by:hover {
  background-color: #848484;
  color: white;
  border: 1px solid rgb(105, 105, 105);
}

button.css-reabrir {
  background-color: rgb(55, 55, 55);
  border: 1px solid gray;
  color: white;
  font-size: 80%
}

button.css-reabrir:hover {
  background-color: rgb(224, 224, 224);
  color: white;
}

button.css-detalhes {
  background-color: rgb(55, 55, 55);
  border: 1px solid gray;
  color: white;
  font-size: 80%;
}

button.css-detalhes:hover {
  background-color: rgb(55, 55, 55, 0.3);
}

div#detalhes {
  background-color: rgb(245, 245, 245);
  border: 1px solid grey;
  height: 230px;
  padding: 0;
  margin: 0;
  text-align: left;
  overflow: auto;
}

div#detalhes h4 {
  text-align: center;
}

div#botoes-detalhes-feedback button a {
  color: white;
  text-decoration: none;
}

div#feedback {
  background-color: rgb(245, 245, 245);
  border: 1px solid grey;
  height: 230px;
  padding: 0;
  margin: 0;
  text-align: left;
  overflow: auto;
}

div#feedback h4 {
  text-align: center;
}

div#espaco-detalhes p {
  text-align: left;
}

div#espaco-feedback p {
  text-align: left;
}

div#modal-observacoes {
  background-color: rgb(245, 245, 245);
}

div#modal-observacoes h4 {
  text-align: center;
}

div#modal-observacoes .modal-body {
  text-align: center;
}

div#confirmacao-inserir-informacoes h4 {
  color: green;
}


/* ESTILIZAÇÃO DO CHAT */

div#row-chat {
  margin-top: 1%;
  width: 100%;
}

div#chat-cols {
  height: 200px;
  overflow: auto;
}

div#chat-cols .table {
  overflow: scroll;
}

div#chat-cols table#main-chat thead tr th {
  position: sticky;
  top: -1.3px;
  z-index: 0;
  text-align: left;
}

div#chat-cols table#main-chat tbody tr td {
  word-wrap: break-word;
  white-space: pre-wrap;
  padding: 1%;
}

.class-cor-one {
  background-color: rgb(245, 245, 245);
}

.class-cor-two {
  background-color: rgb(220, 220, 220);
}


/*FIM DA ESTILIZAÇÃO DO CHAT
<!DOCTYPE html>

<html>

<head>
  <title>T-GET</title>
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=devide-width, initial-scale=1">
  <meta charset="UTF-8">

  <link href="../_css-get/pagina-minhas-tarefas/estilo-minhas-tarefas.css" rel="stylesheet">
  <!-- ARQUIVO CSS DESTA PÁGINA -->
  <link href="../_css-get/menu/estilo-menus.css" rel="stylesheet">
  <!-- ARQUIVO DO MENU DESTA PÁGINA -->


</head>


<body>

  <div class="container">
    <div class="row" id="row-resultado-pesquisa">

      <!-- DIV QUE EXIBE O RESULTADO DA PESQUISA DO FORMULÁRIO -->

      <div id="resultado-pesquisa">


        <!-- DIV QUE EXIBE AS INFORMAÇÕES DE RETORNO DA CONSULTA -->

        <div class="mt-1 border" id="exibicao">

          <!-- TABELA QUE EXIBE DINAMICAMENTE COM O PHP OS RESULTADOS DA CONSULTA AO BANCO -->

          <table class="table border table-striped table-sm table-hover" id="resultado-exibicao">

            <thead>


              <tr class=" bg-primary">
                <!--<tr><th>Código</th>-->
                <!-- class para ocultar no responsivo  "th-ocultar-responsivo-thead">-->
                <th class="thfixado text-light  bg-primary th-ocultar-responsivo-thead">Cod</th>
                <th class="thfixado text-light  bg-primary ">Cliente</th>
                <th class="thfixado text-light  bg-primary th-ocultar-responsivo-thead ">Tributação</th>
                <th class="thfixado text-light  bg-primary">Tarefa</th>
                <th class="thfixado text-light  bg-primary">Data</th>
                <th class="thfixado text-light  bg-primary">Status</th>
                <th class="thfixado text-light  bg-primary th-ocultar-responsivo-thead" style="width:40%">R</th>
                <th class="thfixado text-light  bg-primary th-ocultar-responsivo-thead" style="width:40%">S</th>
                <th class="thfixado text-light  bg-primary" style="width:40%">D</th>
              </tr>
              <tr class="trfixadocampo bg-light" id="tr-minhas-empresas">
                <th class="thfixadocampo text-light  col-md-0"><input type="text" id="txtColuna1" class="form-control form-control-sm"></th>
                <th class="thfixadocampo text-light  col-md-5"><input type="text" id="txtColuna2" class="form-control form-control-sm"></th>
                <th class="thfixadocampo text-light col-md-1"><input type="text" id="txtColuna3" class="form-control form-control-sm"></th>
                <th class="thfixadocampo text-light col-md-4"><input type="text" id="txtColuna4" class="form-control form-control-sm"></th>
                <th class="thfixadocampo text-light col-md-1"><input type="text" id="txtColuna5" class="form-control form-control-sm"></th>
                <th class="thfixadocampo text-light  col-md-1"><input type="text" id="txtColuna1" class="form-control form-control-sm"></th>
                <th class="thfixadocampo border border-dark col-md-0"></th>
                <th class="thfixadocampo border border-dark col-md-0"></th>
                <th class="thfixadocampo border border-dark col-md-0"></th>

              </tr>

            </thead>

            <tbody id="registros-atividades">



            </tbody>

          </table>


        </div>

      </div>
    </div>
    <!--fim container-->

    <!-- SCRIPTS -->


    <script src="../_jquery/jquery-3.2.1.min.js"></script>
    <!-- ARQUIVO JQUERY -->
    <script src="../_bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="../_bootbox/bootbox.min.js"></script>
    <script src="../_bootbox/bootbox.locales.min.js"></script>
    <script src="../_scripts/script-get/script-pagina-interface/interface-script.js"></script>
    <script src="../_scripts/chat/enviar-mensagem.js"></script>
    <!-- Arquivo JavaScript do CHAT -->
    <script src="../_scripts/chat/atualiza-chat.js"></script>
    <!-- Arquivo JavaScript do CHAT -->
    <script src="../_scripts/suporte/abre_chamado.js"></script>

</body>
<!-- FIM DO BODY -->

</html>
<!-- FIM DO HTML -->

<?php
	// Fechando Conexão
	
	mysqli_close($conecta);
	
	
?>

Image in Firefox

inserir a descrição da imagem aqui

Image in Chrome

inserir a descrição da imagem aqui

Follow code already rendered on the page( Obs. I cleaned some things to fit everything without getting polluted the view)

<!DOCTYPE html>

<html>

<head>



  <title>T-GET</title>
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=devide-width, initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../_bootstrap/4.3.1/css/bootstrap.min.css">
  <link href="../_css-get/pagina-minhas-tarefas/estilo-minhas-tarefas.css" rel="stylesheet">
  <!-- ARQUIVO CSS DESTA PÁGINA -->
  <link href="../_css-get/menu/estilo-menus.css" rel="stylesheet">
  <!-- ARQUIVO DO MENU DESTA PÁGINA -->


</head>


<body>


  <!-- <li><a href="tela-trocar-senha.php" style="color: white; background-color: rgba(35, 61, 117, 1);">Trocar Senha</a> </li>-->






  <!--LINK NOTIFICAÇÕES GLOBAL-->
  <script src="../_scripts/notificacoes/notificacoes-global.js"></script>
  <script src="../_scripts/suporte/abre_chamado.js"></script>
  <script src="../_scripts/script-get/notificacao/notificacao.js"></script>


  <div class="mt-3 container">


    <div class="container">
      <div class="row" id="row-resultado-pesquisa">

        <!-- DIV QUE EXIBE O RESULTADO DA PESQUISA DO FORMULÁRIO -->

        <div id="resultado-pesquisa">


          <!-- DIV QUE EXIBE AS INFORMAÇÕES DE RETORNO DA CONSULTA -->

          <div class="mt-1 border" id="exibicao">

            <!-- TABELA QUE EXIBE DINAMICAMENTE COM O PHP OS RESULTADOS DA CONSULTA AO BANCO -->

            <table class="table border table-striped table-sm table-hover" id="resultado-exibicao">

              <thead>


                <tr class=" bg-primary">
                  <!--<tr><th>Código</th>-->
                  <!-- class para ocultar no responsivo  "th-ocultar-responsivo-thead">-->
                  <th class="thfixado text-light  bg-primary th-ocultar-responsivo-thead">Cod</th>
                  <th class="thfixado text-light  bg-primary ">Cliente</th>
                  <th class="thfixado text-light  bg-primary th-ocultar-responsivo-thead ">Tributação</th>
                  <th class="thfixado text-light  bg-primary">Tarefa</th>
                  <th class="thfixado text-light  bg-primary">Data</th>
                  <th class="thfixado text-light  bg-primary">Status</th>
                  <th class="thfixado text-light  bg-primary th-ocultar-responsivo-thead" style="width:40%">R</th>
                  <th class="thfixado text-light  bg-primary th-ocultar-responsivo-thead" style="width:40%">S</th>
                  <th class="thfixado text-light  bg-primary" style="width:40%">D</th>
                </tr>
                <tr class="trfixadocampo bg-light" id="tr-minhas-empresas">
                  <th class="thfixadocampo text-light  col-md-0"><input type="text" id="txtColuna1" class="form-control form-control-sm"></th>
                  <th class="thfixadocampo text-light  col-md-5"><input type="text" id="txtColuna2" class="form-control form-control-sm"></th>
                  <th class="thfixadocampo text-light col-md-1"><input type="text" id="txtColuna3" class="form-control form-control-sm"></th>
                  <th class="thfixadocampo text-light col-md-4"><input type="text" id="txtColuna4" class="form-control form-control-sm"></th>
                  <th class="thfixadocampo text-light col-md-1"><input type="text" id="txtColuna5" class="form-control form-control-sm"></th>
                  <th class="thfixadocampo text-light  col-md-1"><input type="text" id="txtColuna1" class="form-control form-control-sm"></th>
                  <th class="thfixadocampo border border-dark col-md-0"></th>
                  <th class="thfixadocampo border border-dark col-md-0"></th>
                  <th class="thfixadocampo border border-dark col-md-0"></th>

                </tr>

              </thead>

              <tbody id="registros-atividades">



              </tbody>

            </table>


          </div>

        </div>

      </div>
      <!-- row resultados pesquisa-->

      <div class="modal" tabindex="-1" id="modal-observacoes">
        <div class="modal-dialog">
          <div class="modal-content">

            <div class="modal-header bg-primary">
              <h4 class="modal-title text-light">Inserir Observações na Atividade</h4>
              <button class="close" aria-label="close" data-dismiss="modal">
									<span aria-hidden="true">&times;</span>
								</button>

            </div>

            <div class="modal-body bg-light">

              <form id="inserir-observacoes">

                <div class="form-group col-md-12" style="font-size: 120%">
                  <textarea class="form-control form-control-sm" name="observacoes-modal" id="observacoes-modal" style="resize: none" rows="4" maxlength="500" placeholder="Descreva aqui o seu feedback sobre a atividade" required></textarea>
                </div>

                <input type="text" name="codigo-modal-observacoes" id="codigo-modal-observacoes" readonly>
                <!--Código ocultado Andrews-->
                <input type="submit" class="btn btn-primary" name="enviar-modal-observacoes" id="enviar-modal-observacoes" value="Inserir">
              </form>
            </div>
          </div>
        </div>
      </div>





      <!--CHAT ONLINE -->
    </div>
    <!--fim container-->

    <!-- SCRIPTS -->

    <script src="../_bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="../_jquery/jquery-3.3.1.min.js"></script>
    <!-- ARQUIVO JQUERY -->


    <script src="../_scripts/script-get/script-pagina-interface/interface-script.js"></script>
    <script src="../_scripts/chat/enviar-mensagem.js"></script>
    <!-- Arquivo JavaScript do CHAT -->
    <script src="../_scripts/chat/atualiza-chat.js"></script>
    <!-- Arquivo JavaScript do CHAT -->
    <script src="../_scripts/suporte/abre_chamado.js"></script>




    <!--script para funcionamento do tooltip do bootstrap, ao passar o mouse no item da lista stand by e reabrir atividade -->

    <script>
      $(function() {
        $('[data-toggle="tooltip"]').tooltip();
      })
    </script>

</body>
<!-- FIM DO BODY -->

</html>
<!-- FIM DO HTML -->

jquery html5 css3 bootstrap-4

  • Just a curiosity question, select bootstrap css? <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  • 2

    If you post the HTML that is rendered in the Browser would be better, go to the browser makes the query with the table filled, press Ctrl+U and get the source code already rendered, this will make it easier to answer you...

  • The code was being called in the Menu but I put in calling right on the page and continues the problem @THIAGODEBONIS

  • @hugocsl put if you need I can change or insert something else

  • 1

    Add relevant CSS and JS as well, if you can organize (remove links that will break, repeat line breaks, etc) your code also helps

  • Cara was telling you to post a code that already has the table populated in the same way you posted in the question http://prntscr.com/nw1qjs as you posted the code like this... http://prntscr.com/nw1r5p the table is missing

  • 1

    From what I’ve seen, in Chrome it breaks the line in place of the task. Put the nowrap attribute in the <td> of the task description.

  • @Sumback , but then the table would not be responsive. Your diva was very valid. But you have to use the scroll-x in the table and it takes the responsiveness out. You would have a solution that handles the responsiveness of the table ?

  • @Thiagopetherson Create a div with the "table-Responsive" class and place the div of the table inside this new div, it might help.

  • @sumback the part of nowrap ate that helped but as Thiago said the list loses responsiveness, I noticed that when the Jquery file prevents the columns from standing straight as if it erased Boostrap settings, there might be some way around in this case ?

Show 5 more comments
No answers

Browser other questions tagged jquery html5 css3 bootstrap-4

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