Jump to content
ramonjba

Collapsible Materialize - Layout

Recommended Posts

Olá pessoal. Estou desenvolvendo uma especie de monitoramento, estou utilizando o MATERIALIZE, desta forma, optei por não trabalhar com responsividade, pois preciso do máximo de informações possíveis na tela, seja desktop ou mobile, fazendo o ajuste de zoom se preciso. Fiquei cerca de dois anos sem programar, eu havia feito esse projeto para meu TCC, porém após finalizar, deixei parado e acabei perdendo. Com o tempo, algumas ideias em relação ao projeto também mudaram, e para apresentar a informações das `Torres de Internet`, utilizei o collapsible-header conforme imagem `projeto_monitor`, pois, ao clicar em cima do `equipamento`, ele apresenta informações relacionadas a ele. Estou tendo problemas para alinhar estes `collapsible-header ` pois preciso preencher toda a tela, sem deixar espaçamentos. Para isso, fiz uma classe CSS contendo: 

 

.row .col.quadroTorre1 {
    margin-top: -10%;
    margin-bottom: 10%;
}
.row .col.quadroTorre2 {    
    margin-top: -7.3%;
    margin-bottom: 10%;
}
.row .col.quadroTorre3 {
    margin-top: -30%;
    margin-bottom: 10%;
}
.row .col.quadroTorre4 {
    margin-top: -1.7%;  
    margin-bottom: 10%;
}

 

E fiz uma verificação no código, para ver qual o numero de equipamentos que a `Torre` que está acima tem. Porém, como podemos observar, na segunda linha funcionou preenchendo os espaços, mas pulando para a terceira linha, já possui uma lacuna em branco, onde deveria estar situado o elemento. Além disso, os elementos da segunda linha, acabam se sobrepondo, conforme imagem `projeto_sobrepor`. Como fiquei cerca de 2 anos sem programar, estou encontrando algumas dificuldades e empacando nelas. A parte de front-end é a que gera maior dificuldade. Se alguém puder me auxiliar, agradeço. 

 

Edit: Se alguém tiver dicas de como posso melhorar o preenchimento das lacunas em branco. 

 

projeto_monitor.jpg

projeto_sobrepor.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By djwagnersp
      Boa noite amigos, tudo bem?
      Estou montando um site com materialize, inseri um carousel-slider porem ele nao da autoplay, alguem sabe me dizer qual o problema?
       
      segue meu codigo para detalhar
       
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" /> <title>Lab Ingressos - Sua Melhor Experiência em Entretenimento</title> <!-- CSS --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" /> <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" /> <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script> </head> <body class="grey lighten-4"> <?php include_once 'inc/menu_nav.php';?> <div class="tabs-content carousel carousel-slider"> <a class="carousel-item" href="#one!"><img src="img/img1.jpg"></a> <a class="carousel-item" href="#two!"><img src="img/logo_LAB_full.png"></a> <a class="carousel-item" href="#three!"><img src="img/img2.jpg"></a> </div> (function ($) { $(function () { $(".sidenav").sidenav(); $('.carousel.carousel-slider').carousel({ fullWidth: true, duration: 200, }); $(".collapsible").collapsible(); $("#textarea1").val(""); M.textareaAutoResize($("#textarea1")); $(document).ready(function () { $("select").formSelect(); }); }); // end of document ready\ })(jQuery); // end of jQuery name space  
    • By jcvlanova
      Galera, dei uma olhada no Site https://www.fastly.com/ e percebi que a página é estruturada em tópicos circundados, divididos por uma espécie de caixas, boxes formados por linhas e curvas, alguém saberia me dizer como é possível fazer essas linhas curvas uma página html ???
    • By ViniciusRamoa
      Eu peguei um site já pronto em laravel, minha ideia era só pegar o site que o cara distribuiu e mudar layout aos poucos para se adaptar para mim, eu sei, digamos, o intermediário de css e básico de Php e html, e o que eu quero alterar é só o básico como: cores, background e etc, mas mesmo eu alterando os arquivos css ou até mesmo apagando todos os arquivos css, NADA muda no site, como se fosse inútil os arquivos css, mudar a aparência no laravel é diferente? Qual o método?
      Vale lembrar que possui vários arquivos .blade (index.blade, footer.blade etc), isso tem algo a ver? Obrigado
    • By Alvaro_php
      Pessoal boa noite
      Estou começando no PHP e estou com uma dúvida para poder enviar uma confirmação de uma página para outra e não quero mandar pela URL, para não ficar visível ao usuário
      Tenho um captcha e nele estou fazendo uma comparação para poder jogar para uma outra página , caso o código esteja certo
      <?php session_start();
          if( $_SESSION['captcha'] == $_POST['captcha']){
          header("location: emitir_titulo1.php");
          }else{
              echo "<h1>Erro - Código digitado errado</h1>";
          }
      ?>
      Até ai tudo bem esta fazendo certinho, o que eu quero é que na minha emitir_titulo1.php eu consiga fazer uma identificação qqer, onde demonstre que o usuário passou pelo captcha e não jogou o caminho completo até a página emitir_titulo1
      Tentei abri a session no emitir_titulo1 porém não deu certo, pois ela vem em branco, e quando coloco o caminho inteiro da página ele abre normalmente
      Tentei usar o $_POST, más não tem como ou não sei enviar mesmo, pois estou chamando a página pelo header
       
       
      Então mudei e tentei criar um arquivo txt com a palavra confirmado
      <?php session_start();
          if( $_SESSION['captcha'] == $_POST['captcha']){
              $fp = fopen("seguranca.txt","a+");
              $escreve = fwrite($ft,"confirmado");
              fclose($ft);
              header ("location: emitir_titulo1.php");
          }else{
              echo "<h1>Erro - Código digitado errado</h1>";
          }
      ?>
       
      e na página emitir_titulo1.php coloquei
      <?php  
          $arquivo = "seguranca.txt";
          $ft=fopen($arquivo,"r");
          $conteudo=fread($ft,filesize($arquivo));
          fclose($ft);
          
          if ($conteudo == 'confirmado')
          {
              unlink("seguranca.txt");
          }else{
              header("location: verificacao.php");
          }
      ?>
       
      Quando a página para executar e digito o código de verificação do captcha, aparece a mensagem abaixo
      Warning: fwrite(): supplied argument is not a valid stream resource in caminhodomeuservidor\valida.php on line 5
      Warning: fclose(): supplied argument is not a valid stream resource in caminhodomeuservidor\valida.php on line 6
      Warning: Cannot modify header information - headers already sent by (output started at caminhodomeuservidor\valida.php:5) in caminhodomeuservidor\valida.php on line 7
       
      Más quando coloco o caminho completo da minha página emitir_titulo1.php, ele continua abrindo a página normalmente, e o arquivo gerado esta em branco
       
      Alguém pode me dar uma ajuda, estou o dia todo nisso, o bom é que pesquisei bastante coisa, porém não tenho muito tempo para finalizar
       
      Desde já agradeço a todos
    • By CharlieAldrin
      Estou tentando fazer um chat, e nele é necessário saber se um usuário continua na página do chat, para caso ele saia informar o outro usuário.
      Encontrei em alguns lugares como solução fazer um ajax conferindo se o usuário está "dando sinal de vida" de 10 em 10 segundos (por exemplo), porém não entendi como fazer isso e nem como colocar no código. Alguém pode me ajudar por favor? 
      Ou me informar se existe alguma forma melhor de conferir isso?
       
      Valeu desde já :) 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.