Collapsible Materialize - Layout
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.
Discussão (0)
Carregando comentários...