2
Good night ! I’m struggling with one of the layouts of my project in which I have a div divided into 3 parts, where the top right will contain cards that selected will bring the data into a list at the bottom, I’m building the interface yet, and in the tests I’m doing I want this div to fit the theme of the computer screen, and the list has a scrollbar, as is my code below the list exceeds the size of the screen:
<!DOCTYPE html> <!-- page 2-->
<html lang="pt">
<head>
<!-- metas obrigatórios para o bootstrap para compatibilidades-->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- LINK OBRIGATÓRIOS PARA BOOTSTRAP, SWEETALERT2 E ANIMATE.CSS-->
<link href="node_modules/bootstrap/compiler/bootstrap.css" rel="stylesheet" />
<link href="node_modules/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet" />
<link href="node_modules/animate.css/animate.min.css" rel="stylesheet" />
<link href="node_modules/bootstrap/compiler/style.css" rel="stylesheet" />
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Home Page</title>
</head>
<body>
<div class="container-fluid my-3 block_demarcacao0">
<div class="row block_demarcacao">
<div class="col-md-9 block_demarcacaol">
<!--linha 1 dos cards -->
<div class="row block_demarcacao">
<!--card 1-->
<div class="col-md-3 my-2 ml-1">
<div class="card">
<div class="card-body block__card--aguardando">
<p class="card-title block__card--title">
Aguardando atendimento
</p>
<div class="row block__card--dados">
<div class="col align-right">
<i class="fa fa-flag"></i>
</div>
<div class="col align-left">
<p class="text-right">5</p>
</div>
</div>
</div>
</div>
</div>
<!--card 2-->
<div class="col-md-3 my-2 ml-1">
<div class="card">
<div class="card-body block__card--pausa">
<p class="card-title block__card--title">
Em Pausa
</p>
<div class="row block__card--dados">
<div class="col align-right">
<i class="fa fa-pause"></i>
</div>
<div class="col align-left">
<p class="text-right">12</p>
</div>
</div>
</div>
</div>
</div>
<!--card 3-->
<div class="col-md-3 my-2 ml-1">
<div class="card">
<div class="card-body block__card--feedback">
<p class="card-title block__card--title">
Aguardando Feedback
</p>
<div class="row block__card--dados">
<div class="col align-right">
<i class="fa fa-deaf"></i>
</div>
<div class="col align-left">
<p class="text-right">3</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--linha 2 dos cards-->
<div class="row block_demarcacao">
<div class="col-md-3 my-2 ml-1">
<div class="card">
<div class="card-body block__card--homologacao">
<p class="card-title block__card--title">
Em Homologação
</p>
<div class="row block__card--dados">
<div class="col align-right">
<i class="fa fa-bug"></i>
</div>
<div class="col align-left">
<p class="text-right">5</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 my-2 ml-1">
<div class="card">
<div class="card-body block__card--agendado">
<p class="card-title block__card--title">
Agendados
</p>
<div class="row block__card--dados">
<div class="col align-right">
<i class="fa fa-calendar-check-o"></i>
</div>
<div class="col align-left">
<p class="text-right">5</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--FIM DOS CARDS -->
<!--LISTA DE CHAMADOS -->
<div class="row block_demarcacaolista">
<div class="container-fluid list-group" data-spy="scroll">
<div class="row list-group-item">
<div class="row">
<div class="col-md-2 ml-1">
<a href="#" class="list-goup-item">#36985</a>
</div>
<div class="col-md-2 ml-1">
<span>Integração WIS</span>
</div>
<div class="col-md-2 ml-1">
<span>Eduardo</span>
</div>
<div class="col-md-2 ml-1">
<span>3:30</span>
</div>
<div class="progress">
<div class="progress-bar" style="width:70%">3:30000000</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ml-1">
<span>Retrabalho</span>
</div>
<div class="col-md-2 ml-1">
<span>Bruno Luzardi</span>
</div>
<div class="col-md-2 ml-1">
<span>WMS - Integração</span>
</div>
<div class="col-md-2 ml-1">
<span>06 dias</span>
</div>
</div>
</div>
<div class="row list-group-item">
<div class="row">
<div class="col-md-2 ml-1">
<a href="#" class="list-goup-item">#36985</a>
</div>
<div class="col-md-2 ml-1">
<span>Integração WIS</span>
</div>
<div class="col-md-2 ml-1">
<span>Eduardo</span>
</div>
<div class="col-md-2 ml-1">
<span>3:30</span>
</div>
<div class="progress">
<div class="progress-bar" style="width:70%">3:30000000</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ml-1">
<span>Retrabalho</span>
</div>
<div class="col-md-2 ml-1">
<span>Bruno Luzardi</span>
</div>
<div class="col-md-2 ml-1">
<span>WMS - Integração</span>
</div>
<div class="col-md-2 ml-1">
<span>06 dias</span>
</div>
</div>
</div>
<div class="row list-group-item">
<div class="row">
<div class="col-md-2 ml-1">
<a href="#" class="list-goup-item">#36985</a>
</div>
<div class="col-md-2 ml-1">
<span>Integração WIS</span>
</div>
<div class="col-md-2 ml-1">
<span>Eduardo</span>
</div>
<div class="col-md-2 ml-1">
<span>3:30</span>
</div>
<div class="progress">
<div class="progress-bar" style="width:70%">3:30000000</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ml-1">
<span>Retrabalho</span>
</div>
<div class="col-md-2 ml-1">
<span>Bruno Luzardi</span>
</div>
<div class="col-md-2 ml-1">
<span>WMS - Integração</span>
</div>
<div class="col-md-2 ml-1">
<span>06 dias</span>
</div>
</div>
</div>
<div class="row list-group-item">
<div class="row">
<div class="col-md-2 ml-1">
<a href="#" class="list-goup-item">#36985</a>
</div>
<div class="col-md-2 ml-1">
<span>Integração WIS</span>
</div>
<div class="col-md-2 ml-1">
<span>Eduardo</span>
</div>
<div class="col-md-2 ml-1">
<span>3:30</span>
</div>
<div class="progress">
<div class="progress-bar" style="width:70%">3:30000000</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ml-1">
<span>Retrabalho</span>
</div>
<div class="col-md-2 ml-1">
<span>Bruno Luzardi</span>
</div>
<div class="col-md-2 ml-1">
<span>WMS - Integração</span>
</div>
<div class="col-md-2 ml-1">
<span>06 dias</span>
</div>
</div>
</div>
<div class="row list-group-item">
<div class="row">
<div class="col-md-2 ml-1">
<a href="#" class="list-goup-item">#36985</a>
</div>
<div class="col-md-2 ml-1">
<span>Integração WIS</span>
</div>
<div class="col-md-2 ml-1">
<span>Eduardo</span>
</div>
<div class="col-md-2 ml-1">
<span>3:30</span>
</div>
<div class="progress">
<div class="progress-bar" style="width:70%">3:30000000</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ml-1">
<span>Retrabalho</span>
</div>
<div class="col-md-2 ml-1">
<span>Bruno Luzardi</span>
</div>
<div class="col-md-2 ml-1">
<span>WMS - Integração</span>
</div>
<div class="col-md-2 ml-1">
<span>06 dias</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 block_demarcacaol">
<span>Aqui fica o SATI em atendimento</span>
</div>
</div>
</div>
<!--Componentes opcionais mas importantissimos sempre seguindo essa ordem jquery, popper, bootstrap-->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
<script src="js/scriptsSweet.js"></script>
</body>
CSS
.block--footer{
position:absolute;
bottom:0;
width:100%;
}
.block--navbar{
background-color: #030040;
}
.block__logo{
width: 100%;
height: 150px;
}
.block__input{
margin-top: 15px;
}
.block__btnprimary{
margin-top: 15px;
width: 100%;
font-size: 20px;
background: white;
color: blue;
border-style: solid;
border-width: 1px;
border-color: blue;
}
.block--navbar__logo{
width: 100px;
height: 35px;
}
.block--navbar__link {
font-size: 18px;
color: rgba($black, .5);
}
.block--navbar__icon {
font-size: 60px;
color: rgba($black, .5);
}
.block--navbar__link:hover {
font-size: 21px;
color: rgba($primaryDark, .8);
.block--navbar__icon{ color: rgba(blue, 0.8)};
}
.block--navbar__profile{
font-size: 23px;
color: rgba($black, .5);
}
.block__card{
width: 180px;
height: 100px;
text-align: end;
min-width: 50px;
font-size: 11px;
color: white;
border-radius: 5px 5px 5px 5px;
border: 0ch;
}
.block__card:hover{
opacity: 0.8;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.block__card--pausa{
@extend .block__card;
background-color: rgb(138, 138, 4);
}
.block__card--agendado{
@extend .block__card;
background-color: rgb(228, 61, 32);
}
.block__card--aguardando{
@extend .block__card;
background-color: blue;
}
.block__card--feedback{
@extend .block__card;
background-color: rgb(11, 152, 207);
}
.block__card--homologacao{
@extend .block__card;
background-color: rgb(40, 5, 73);
}
.block__card--dados{
font-size: 22px;
text-align: start;
}
.block_demarcacao{
border-style: solid;
border-width: 2px;
border-color: #030040;
}
.block_demarcacaol{
border-style: solid;
border-width: 2px;
border-color: #BF622D;
}
.block_demarcacao0{
border-style: solid;
border-width: 2px;
border-color: brown;
}
.block_demarcacaolista{
height: 350px;
border-style: solid;
border-width: 2px;
border-color: brown;
}
The way it is it displays the 3 parts more or less as I need, but I’m not able to limit their size, in case, the div that will contain the list of calls by category.
I fixed the size of the lower div just to try to force the scrollspy, but without success.
Just looking at the image and with the code you posted is difficult to verify and reproduce the page to try to simulate the problem and find a solution.
– Sam
Sorry, I had posted the wrong page code, please check if improved
– Eduardo Rafael Moraes
You want to adjust this div "block_demarcacaolista" so it does not exceed the screen and get a scroll?
– Sam