I am trying to create some lists that are not displayed completely. I only want the one that is "active" to be displayed and resembles the header. Then, with css
I want the content to be displayed on hover. This is the progress:
.list-contenedor {
width: 150px;
position: relative;
}
.list-maquina {
position: relative;
width: 150px;
transition: width 200ms;
}
.list-maquina:hover {
width: 400px;
z-index: 200;
}
.list-maquina .list-orden {
display: none;
transition: display 500ms;
}
.list-maquina:hover .list-orden {
display: inline;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row">
<div class="col-auto ">
<ul class="list-group list-maquina mt-2">
<li class="list-group-item active d-flex justify-content-between">
Texto
</li>
<li class="list-group-item list-orden">Item</li>
<li class="list-group-item list-orden disabled">
No hay ordenes asignadas
</li>
</ul>
</div>
<div class="col-auto ">
<ul class="list-group list-maquina mt-2">
<li class="list-group-item active d-flex justify-content-between">
Texto
</li>
<li class="list-group-item list-orden">Item</li>
<li class="list-group-item list-orden disabled">
No hay ordenes asignadas
</li>
</ul>
</div>
<div class="col-auto ">
<ul class="list-group list-maquina mt-2">
<li class="list-group-item active d-flex justify-content-between">
Texto
</li>
<li class="list-group-item list-orden">Item</li>
<li class="list-group-item list-orden disabled">
No hay ordenes asignadas
</li>
</ul>
</div>
</div>
What I want to prevent is that everything is re-accommodated. The fact that the rest would move would not cause me a problem, but when the element is on the right side, it moves down, removing the entire box from the focus. How to solve this problem?
In the end I managed to solve it by modifying the structure a bit