I generate the lists with css3
this way:
.list-contenedor {
max-width: 400px;
min-width: 150px;
height: 50px;
position: unset;
font-size: 10pt;
}
.list-maquina {
position: relative;
width: 150px;
}
.list-orden-grupo {
position: relative;
width: 150px;
max-width: 600;
direction: ltr;
transition: all 300ms ease-out 100ms;
}
.list-orden-grupo:hover {
width: 400px;
z-index: 200;
}
.list-orden-grupo .list-orden {
height: 1px;
position: absolute;
opacity: 0;
}
.list-orden-grupo:hover .list-orden {
animation: 0.5s in;
animation-fill-mode: forwards;
}
@keyframes in {
0% {
height: 1px;
position: absolute;
opacity: 0;
}
1% {
position: static;
visibility: visible;
}
100% {
position: static;
opacity: 1;
height: 50px;
}
}
.list-orden-grupo:hover .active {
transition: all 300ms ease-out 100ms;
}
.list-orden-grupo:hover .active {
background-color: rgb(16, 42, 119);
}
.list-orden-grupo .list-orden-en-cola {
display: none;
}
.list-orden-grupo:hover .list-orden-en-cola {
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-12 d-flex justify-content-center">
<div class="row">
<div
class="list-contenedor shadow mr-3 mb-2"
*ngFor="let maquina of maquinas"
>
<ul class="list-group list-maquina mt-2">
<span
[id]="maquina._id"
cdkDropList
(cdkDropListDropped)="drop($event)"
[cdkDropListData]="maquina.pila"
[cdkDropListConnectedTo]="idsMaquinas()"
class="list-orden-grupo"
>
<li class="list-group-item active text-center shadow rounded">
<span
class="d-flex justify-content-between align-items-center w-100 "
>
<span> maquina</span>
<span>
| <i class="fas fa-cog "></i>
<span class="list-orden-en-cola">
En cola:
</span>
0</span
>
</span>
</li>
<li class="list-group-item list-orden shadow list-group-item-dark">
<ng-container *ngIf="maquina.trabajando; else sinTrabajoTemp">
<i class="fas fa-cog fa-spin text-warning"></i>
{{ maquina.trabajo }}
</ng-container>
<ng-template #sinTrabajoTemp>
Sin trabajo asignado
</ng-template>
</li>
<li
*ngIf="maquina.pila.length"
class="list-group-item list-orden shadow d-flex justify-content-between"
>
<b>
<i
(click)="reiniciarPila(maquina)"
class="fas fa-recycle text-danger "></i>
</b>
<b
title="Click para ordenar por este campo"
(click)="ordenarPila(maquina, 'numeroDeOrden')"
>
#ORD
</b>
<b
title="Click para ordenar por este campo"
(click)="ordenarPila(maquina, 'modeloCompleto')"
>
MOD
</b>
<b
title="Click para ordenar por este campo"
(click)="ordenarPila(maquina, 'paso')"
>
PASO
</b>
</li>
<li
cdkDrag
*ngFor="let orden of maquina.pila; let i = index"
class="list-group-item list-orden shadow d-flex justify-content-between"
>
<span class="no-wrap text-left"># 20.-</span>
<span class="no-wrap text-left">2-20-2</span>
<span class=" text-left">25651554</span>
<span class="no-wrap text-left">21521</span>
</li>
<li
*ngIf="!maquina.pila.length"
class="list-group-item list-orden shadow"
>
No hay ordenes asignadas
</li>
</span>
</ul>
</div>
<div
class="list-contenedor shadow mr-3 mb-2"
*ngFor="let maquina of maquinas"
>
<ul class="list-group list-maquina mt-2">
<span
[id]="maquina._id"
cdkDropList
(cdkDropListDropped)="drop($event)"
[cdkDropListData]="maquina.pila"
[cdkDropListConnectedTo]="idsMaquinas()"
class="list-orden-grupo"
>
<li class="list-group-item active text-center shadow rounded">
<span
class="d-flex justify-content-between align-items-center w-100 "
>
<span> maquina</span>
<span>
| <i class="fas fa-cog "></i>
<span class="list-orden-en-cola">
En cola:
</span>
0</span
>
</span>
</li>
<li class="list-group-item list-orden shadow list-group-item-dark">
<ng-container *ngIf="maquina.trabajando; else sinTrabajoTemp">
<i class="fas fa-cog fa-spin text-warning"></i>
{{ maquina.trabajo }}
</ng-container>
<ng-template #sinTrabajoTemp>
Sin trabajo asignado
</ng-template>
</li>
<li
*ngIf="maquina.pila.length"
class="list-group-item list-orden shadow d-flex justify-content-between"
>
<b>
<i
(click)="reiniciarPila(maquina)"
class="fas fa-recycle text-danger "></i>
</b>
<b
title="Click para ordenar por este campo"
(click)="ordenarPila(maquina, 'numeroDeOrden')"
>
#ORD
</b>
<b
title="Click para ordenar por este campo"
(click)="ordenarPila(maquina, 'modeloCompleto')"
>
MOD
</b>
<b
title="Click para ordenar por este campo"
(click)="ordenarPila(maquina, 'paso')"
>
PASO
</b>
</li>
<li
cdkDrag
*ngFor="let orden of maquina.pila; let i = index"
class="list-group-item list-orden shadow d-flex justify-content-between"
>
<span class="no-wrap text-left"># 20.-</span>
<span class="no-wrap text-left">2-20-2</span>
<span class=" text-left">25651554</span>
<span class="no-wrap text-left">21521</span>
</li>
<li
*ngIf="!maquina.pila.length"
class="list-group-item list-orden shadow"
>
No hay ordenes asignadas
</li>
</span>
</ul>
</div>
<div
class="list-contenedor shadow mr-3 mb-2"
*ngFor="let maquina of maquinas"
>
<ul class="list-group list-maquina mt-2">
<span
[id]="maquina._id"
cdkDropList
(cdkDropListDropped)="drop($event)"
[cdkDropListData]="maquina.pila"
[cdkDropListConnectedTo]="idsMaquinas()"
class="list-orden-grupo"
>
<li class="list-group-item active text-center shadow rounded">
<span
class="d-flex justify-content-between align-items-center w-100 "
>
<span> maquina</span>
<span>
| <i class="fas fa-cog "></i>
<span class="list-orden-en-cola">
En cola:
</span>
0</span
>
</span>
</li>
<li class="list-group-item list-orden shadow list-group-item-dark">
<ng-container *ngIf="maquina.trabajando; else sinTrabajoTemp">
<i class="fas fa-cog fa-spin text-warning"></i>
{{ maquina.trabajo }}
</ng-container>
<ng-template #sinTrabajoTemp>
Sin trabajo asignado
</ng-template>
</li>
<li
*ngIf="maquina.pila.length"
class="list-group-item list-orden shadow d-flex justify-content-between"
>
<b>
<i
(click)="reiniciarPila(maquina)"
class="fas fa-recycle text-danger "></i>
</b>
<b
title="Click para ordenar por este campo"
(click)="ordenarPila(maquina, 'numeroDeOrden')"
>
#ORD
</b>
<b
title="Click para ordenar por este campo"
(click)="ordenarPila(maquina, 'modeloCompleto')"
>
MOD
</b>
<b
title="Click para ordenar por este campo"
(click)="ordenarPila(maquina, 'paso')"
>
PASO
</b>
</li>
<li
cdkDrag
*ngFor="let orden of maquina.pila; let i = index"
class="list-group-item list-orden shadow d-flex justify-content-between"
>
<span class="no-wrap text-left"># 20.-</span>
<span class="no-wrap text-left">2-20-2</span>
<span class=" text-left">25651554</span>
<span class="no-wrap text-left">21521</span>
</li>
<li
*ngIf="!maquina.pila.length"
class="list-group-item list-orden shadow"
>
No hay ordenes asignadas
</li>
</span>
</ul>
</div>
<div
class="list-contenedor shadow mr-3 mb-2"
*ngFor="let maquina of maquinas"
>
<ul class="list-group list-maquina mt-2">
<span
[id]="maquina._id"
cdkDropList
(cdkDropListDropped)="drop($event)"
[cdkDropListData]="maquina.pila"
[cdkDropListConnectedTo]="idsMaquinas()"
class="list-orden-grupo"
>
<li class="list-group-item active text-center shadow rounded">
<span
class="d-flex justify-content-between align-items-center w-100 "
>
<span> maquina</span>
<span>
| <i class="fas fa-cog "></i>
<span class="list-orden-en-cola">
En cola:
</span>
0</span
>
</span>
</li>
<li class="list-group-item list-orden shadow list-group-item-dark">
<ng-container *ngIf="maquina.trabajando; else sinTrabajoTemp">
<i class="fas fa-cog fa-spin text-warning"></i>
{{ maquina.trabajo }}
</ng-container>
<ng-template #sinTrabajoTemp>
Sin trabajo asignado
</ng-template>
</li>
<li
*ngIf="maquina.pila.length"
class="list-group-item list-orden shadow d-flex justify-content-between"
>
<b>
<i
(click)="reiniciarPila(maquina)"
class="fas fa-recycle text-danger "></i>
</b>
<b
title="Click para ordenar por este campo"
(click)="ordenarPila(maquina, 'numeroDeOrden')"
>
#ORD
</b>
<b
title="Click para ordenar por este campo"
(click)="ordenarPila(maquina, 'modeloCompleto')"
>
MOD
</b>
<b
title="Click para ordenar por este campo"
(click)="ordenarPila(maquina, 'paso')"
>
PASO
</b>
</li>
<li
cdkDrag
*ngFor="let orden of maquina.pila; let i = index"
class="list-group-item list-orden shadow d-flex justify-content-between"
>
<span class="no-wrap text-left"># 20.-</span>
<span class="no-wrap text-left">2-20-2</span>
<span class=" text-left">25651554</span>
<span class="no-wrap text-left">21521</span>
</li>
<li
*ngIf="!maquina.pila.length"
class="list-group-item list-orden shadow"
>
No hay ordenes asignadas
</li>
</span>
</ul>
</div>
</div>
</div>
</div>
I am trying to make the elements further to the right grow to the left and not lose their content when leaving the screen. Is it possible to do this only with css3
?
Behavior I want to prevent:
The arrow points to the side I want the content to grow towards. The x is outside the window and as seen in the image the content is cut. This is what I want to prevent.
Information
The lists are generated dynamically. The amount that is generated can be odd and they should, as far as possible, be responsive. So they currently accommodate the size of the window. 4x4x2, 3x3x3x1, etc.
Agregando la siguiente regla
CSS
, obtenemos el resultado que pides.Al asignarles
right: 0;
se consigue que no crezcan a la derecha.Para hacer que este comportamiento solo suceda en determinados tamaños de pantalla, puedes utilizar Media Query, y especificar este comportamiento solo para determinados tamaños.
A continuación muestro un ejemplo (También disponible en JSFiddle) donde se abren los dos últimos elementos hacia la izquierda. Puedes especificar los elementos cambiando el selector de
.list-contenedor:nth-of-type()
.EDITADO: Ahora se utiliza
:nth-last-of-type()
, con lo que se aplica a listas dinámicas (último y anteúltimo elemento).El numero corresponde a la posición empezando por detrás, donde 1 es el último, 2 el anteúltimo, y así sucesivamente.
EDITADO: Ahora se aplica la clase
right-element
a los elementos que queramos abrir a la izquierda (se a actualizado el ejemplo y tambien en JSFiddle).Al cargar, y al re-dimensional la ventana, se calcula que elementos han de tener la clase
right-element
JavaScript extra
CSS extra
Puedes cambiar el numero de elementos al que se les aplica la clase modificando el valor de
elements_to_right
.A partir de aquí, puedes personalizarlo de muchas maneras, ya que ahora dispones de la clase
right-element
en los elementos a la derecha.Existen varias alternativas, veo que usas Bootstrap, por tanto podrías saber que cajas quedan a la izquierda y que a la derecha por el grid que uses y según el tamaño de la pantalla, también puedes puedes agregar clases que distingan las que están a la izquierda y cuales a la derecha, puedes usar: https://getbootstrap.com/docs/4.0/layout/grid/#order-classes para ordenar también y con css se puede agregar a .list-orden-group un right según su distancia a la derecha o a la izquierda, pero esta distancia sólo la puedes saber por javascript.
Javascript que podría solucionar el problema: Obtienes la lista de elementos
Por cada uno calculas la distancia al borde derecho y en el caso de ser menor al ancho de un elemento más un margen le agregamos una clase y gestionas por css
y estilo
A ver si te sirve.