-1

estou com problemas para renderizar este HTML, estou usando django e esse é o template que recebe da viewer, ao tentar usar esse novo formato de cards estou tendo problemas, quero que fique uma caixa fixa que só role quando a pessoa passar por cima dela. Tudo acontece conforme o planejado, mas sempre fica um card no inicio que fica cortado somente isso esta atrapalhando. esse é o HTML:

<div class="container">
  <div class = "caixa"style="overflow-x: auto">
    <div class=" conteudo"><br><br><br><br><br><br>
     {%for os in os%}
    <div class="card ">
      <h6 class="card-header">servico: {{os.servico}}</h6>
      <div class="card-body">
        <p class="card-text">servico: {{os.servico}}</p>
        <p class="card-text">Referencia: {{os.referencia}}</p>
        <p class="card-text">Cidade: {{os.cidade}}</p>
        <p class="card-text">Data do Pedido: {{os.dtpedido}}</p>
      </div>
    </div>
    {%endfor%}

  </div>

  </div>

  </div>

esse é o CSS:

.conteudo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 300px;
  margin-top: 180px;
  background-color: blue;
}
.cardy {
  background-color: red;
  min-width: 300px;
  margin: 2px;

  /*text-align: center;*/
}
.caixa {
  background-color: red;
  width: 300;

}

1 Resposta 1

-1

consegui resolver fazendo testes e analisando sendo assim o HTML ficou:

<div class="container">
  <div class = "caixa"style="overflow-x: auto">
    <div class=" conteudo">
     {%for os in os%}
    <div class="card ">
      <h6 class="card-header">servico: {{os.servico}}</h6>
      <div class="card-body">
        <p class="card-text">servico: {{os.servico}}</p>
        <p class="card-text">Referencia: {{os.referencia}}</p>
        <p class="card-text">Cidade: {{os.cidade}}</p>
        <p class="card-text">Data do Pedido: {{os.dtpedido}}</p>
      </div>
    </div>
    {%endfor%}

  </div>

  </div>

  </div>

e o CSS:

.conteudo {
  /*display: flex;*/
  flex-direction: column;
  /*justify-content: center;*/
  /*align-items: center;*/
  width: 100%;
  height: 300px;
  background-color: blue;
}
.cardy {
  background-color: red;
  min-width: 300px;
  margin: 2px;

  /*text-align: center;*/
}
.caixa {
  background-color: red;
  width: 300;

}

isso esta conforme o que queria, Obrigado a quem leu e espero que ajude se alguem precisar

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 .