0

Olá, minha primeira pergunta (estou um pouco nervoso O.o), espero conseguir explicar minha dúvida.

Minha dúvida...

Tenho um projeto para faculdade e estou com dificuldade de Front-End, necessito realizar um scroll Horizontal (pode ser com clique ou seta direcionais, < ou >), porém estou com complicações para limitar a página verticalmente pois quando incluo uma quarta caixa, ao invés de ir para direita e ficar fora da tela, a caixa vai para baixo, fazendo com que o conteúdo da pagina não seja aguardado em horizontal.

Esta foto abaixo explica oque eu quero dizer, mas no caso não necessita ser mobile.

inserir a descrição da imagem aqui

fonte da imagem: www.codeburst.io

Meu código Html:

<div class="main-content">
<div class="container-fluid">
<mat-tab-group mat-align-tabs="center">
    <div class="row margem">
        <mat-tab label="Pedidos">
            <div class="margem">
                <div class="col-md-4">
                    <div class="card image">
                        Caixa1 que irá conter uma tabela por exemplo
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card image">
                        Caixa2 que ira conter outra tabela por exemplo
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card image">
                        Caixa3 Conter informações de cliente
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card image">
                        Caixa4 Outras informações por exemplo
                    </div>
                </div>
            </div>
        </mat-tab>

Agora o Css:

.margem {
margin: 5px;
width: auto;
height: auto;
border: auto;
white-space: nowrap;
overflow-x: scroll;
glyph-orientation-horizontal: 0deg;
}

.image{
height: auto;
background-image:url('assets/img/imagemBackgroundCard2.jpg');
background-size: 150%;
}

Pesquisei em alguns sites e até aqui mesmo no StackOverFlow, mas não consegui aplicar para minha situação, pensei que poderia ser a classe "col-md-X" já que ela limita e organiza em coluna, removi esta classe, mas continuou o erro, porem totalmente desconfigurado :O

Desde já agradeço!!!

[ ]' Abraços! e Boas festas!

0

1 Resposta 1

0

Cara sua div com classe margem tem que ser "fundida" com a div class row, e as filhas diretas da row tem que ser as col-X. Ai é só colocar um flex-wrap: nowrap na row e não vai mais quebrar a linha. Eu ainda sugiro usar só col-4 e não col-md-4 e remover o white-space: nowrap;!

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
  .margem {
    margin: 5px;
    width: auto;
    height: auto;
    border: auto;
    overflow-x: scroll;
    glyph-orientation-horizontal: 0deg;

    flex-wrap: nowrap;
  }

  .image {
    height: auto;
    background-image: url('assets/img/imagemBackgroundCard2.jpg');
    background-size: 150%;
  }
</style>
</head>

<body>

  <div class="main-content">
    <div class="container-fluid">
      <mat-tab-group mat-align-tabs="center">
        <mat-tab label="Pedidos">
          <!-- <div class="margem"> -->
          <div class="row margem">
            <div class="col-4">
              <div class="card image">
                Caixa1 que irá conter uma tabela por exemplo
              </div>
            </div>
            <div class="col-4">
              <div class="card image">
                Caixa2 que ira conter outra tabela por exemplo
              </div>
            </div>
            <div class="col-4">
              <div class="card image">
                Caixa3 Conter informações de cliente
              </div>
            </div>
            <div class="col-4">
              <div class="card image">
                Caixa4 Outras informações por exemplo
              </div>
            </div>
            <div class="col-4">
              <div class="card image">
                Quinto Elemento
              </div>
            </div>
          </div>
        </mat-tab>
      </mat-tab-group>
    </div>
  </div>

</body>

</html>

2
  • Muito obrigado pela ajuda, consegui resolver graças a você! Commented 10/12/2020 às 12:56
  • @WallaceCorrêa sem problemas amigo, fico feliz em ter ajudado
    – hugocsl
    Commented 10/12/2020 às 13:16

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 .