Reto: #2: scroll inside My Order modal

[juandc]

¡Hola de nuevo!

Con este issue quiero proponerte que soluciones los problemas de scroll dentro del modal de My Order.

El modal se ve perfecto cuando agregamos unos pocos productos al carrito de compras, pero no puede contenerlos correctamente cuando agregamos demasiados elementos.

Para solucionar este reto debes trabajar de nuevo con CSS. Dale las propiedades indicadas al contenedor del modal para que sus elementos no se salgan de él, sino que le permitan al usuario hacer scroll para ver la lista completa.

También recuerda que el campo de precio total y el botón de Checkout siempre deben ser visibles, incluso cuando se deba hacer scroll para ver todos los productos agregados al carrito.

[Diego-Padilla]

Solución para reto 2. En código para que los demás lo vean rapidito. Esto es en el MyOrder.scss
.my-order-content{
overflow-y: scroll;
max-height: 400px;

}
/* width */
.my-order-content::-webkit-scrollbar {
width: 10px;
}

/* Track */
.my-order-content::-webkit-scrollbar-track {
background: #f1f1f1;
}

/* Handle */
.my-order-content::-webkit-scrollbar-thumb {
background: #888;
}

/* Handle on hover */
.my-order-content::-webkit-scrollbar-thumb:hover {
background: #555;
}

[raycris]

En MyOrder.scss agregre la siguiente clase con esta con estoys atributos. Agregre la clase llamda my-order-content que es la que encapsula el precio total y el boton, entonces a esa clase le puse los siguientes estilos.

.my-order-content{
  overflow-y: scroll;
  max-height: 400px;
  scroll-behavior: smooth;
}

[christian-olivers]

con agregar las siguientes propiedades colocamos un scroll en myorder

.MyOrder {
...
overflow-y: auto;
height: 360px;
}

[wldrocha]

cree un contenedor con unos divs colocandole oreder container, adicional a eso coloqué a eso las propiedades
max-height: 65vh;
overflow-y: auto;

para que así el usuario siempre tuviera el precio visible

[julianf-dev]

Buenos días.

En este caso lo que realice fue lo siguiente

1. Que hice fue restructurar en mi JSX agregando un contenedor para la parte total y el botton de ckeckout

<div className="order-total">
      <div className="order">
	      <p><span>Total</span></p>
              <p>${sumTotal()}</p>
      </div>
	  <button className="Button button-order" type="submit">Checkout</button>
</div>

2. A la clase myOrder le agregue un display flex y un flex direccion colum y un height de 90vh

.MyOrder {
	width: 360px;
	position: absolute;
	padding: 24px;
	box-sizing: border-box;
	right: 0;
	background-color: var(--white);
	top: 60px;
	border-radius: 6px;
	border: 1px solid var(--very-light-pink);
	height: 90vh;
	animation: swipeLeft .40s;
	display: flex;
	flex-direction: column;
}

3. Le di una altura al contenedor de las orders y le quite el scroll para que le diera un poco más de estilo

.my-order-content{
	max-height: 80%;
	overflow: auto;
}
.my-order-content::-webkit-scrollbar{
	display: none;
}

Ya con la altura del contenedor anterior el div del checkout y total order se posiciona al final de la página.

[nicojson]

Siguiendo las instruciones que dieron, lo que hice fue agregar una segunda clase a order y use la segunda clase de primary-button

MyOrder.jsx

<div className="order orderTotal">
          <p>
            <span>Total</span>
          </p>
          <p>${sumTotal()}</p>
</div>
        <button className="primary-button add-to-cart-button">Checkout</button>

Agrege el position y el bottom

MyOrder.scss

.orderTotal {
    position: sticky;
    bottom: 74px;
}
.add-to-cart-button {
    position: sticky;
    bottom: 0;
}

[Rspillere]

en Myorder.jsx coloqué un nuevo div dentro de "my-order-content" encapsulando los OrderItem que se crean.

        <div className="cart-product-list">
          {state.cart.map((product) => (
            <OrderItem product={product} key={`orderItem-${product.id}`} />
          ))}
        </div>

luego en MyOrder.scss

.cart-product-list {
	max-height: calc(100vh - 340px);
	overflow-y: auto;
	
}
.cart-product-list::-webkit-scrollbar {
	display: none;
}

oculté el scroll para que se vea mejor

[AndresMpa]

En MyOrder.jsx está esta clase: "my-order-content"

<div className="my-order-content">
    {state.cart.map((product, index) => (
        <OrderItem product={product} indexValue={index} key={index} />
    ))}
</div>

Simplemente, se agrega un "overflow-y" a esa clase y se le pone un límite, así no se tocan más estilos

  .my-order-content {
    overflow-y: auto;
    max-height: 45vh;
  }

[cubancodepath]

Dentro de MyOrder.scss

.my-order-list {
  overflow-y: scroll;
  max-height: 65vh;
}

.my-order-list::-webkit-scrollbar {
  width: 10px;
}

.my-order-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.my-order-list::-webkit-scrollbar-thumb {
  background: #888;
}

.my-order-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

[Guerrita]

.MyOrder {
background-color: #fff;
border: 1px solid var(--very-light-pink);
width: 360px;
padding: 24px;
box-sizing: border-box;
position: absolute;
border-radius: 6px;
top: 60px;
right: 0;
overflow-y: scroll;
overscroll-behavior-y: contain;
max-height: fit-content;
height: 500px;
}

[lvargascol]

Lo hice de esta manera en mi CSS

`.order-content {
display: flex;
flex-direction: column;
overflow-y: scroll;
max-height: calc(100vh - 252px);
padding-right: 8px;
}

.order-content::-webkit-scrollbar {
width: 8px;
}

.order-content::-webkit-scrollbar-track {
background: var(--white);

}

.order-content::-webkit-scrollbar-thumb {
background: var(--very-light-pink);
border: 1px solid var(--white);
}

.order-content::-webkit-scrollbar-thumb:hover {
background: var(--very-light-pink);
border-color: transparent;
}`

[Gustavolando]

El mejor resultado lo conseguí haciendo unos trucos como meter todos los orden items en un div tipo bloque que llamé ".orderItem-container" en "MyOrder.jsx". Esto separa este div de las etiquetas de "Total" y del botón de "Checkout"

      <div className="my-order-content">
        <div className="orderItem-container">
          {state.cart.map((item, index) => (
            <OrderItem product={item} key={`orderItem-${index}`} indexValue={index} />
          ))}
        </div>
        <div className="order">
         ...

Y entonces le di las siguientes propiedades:

.orderItem-container {
  margin-bottom: 5px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

Revisé que todos los heights de los elementos del Nav tuvieran valores fijos (sumando todos sus heights, fontsize, paddings verticales, margins verticales y los 60px del height del menú) El total en mi caso fue de 295px en total. Luego le agregué 5px más al margin-bottom para separar el orderItem-container del resto de elementos de abajo lo que me da un total de 300px. Y ya luego solo me tocaba calcular el max-height usando todo el height del viewport (vh - view height) menos (-) los 300px de todos los demás elementos. Así, si la lista es pequeña el height del div en cuestión se ajusta a la cantidad de elementos, pero si crece y supera esa diferencia calculada, el div no crece más y no da over flow en los demás elementos.
Nota: Esto puede ser un problema en el despliegue horizontal en dispositivos móviles, pero ya solucionaremos eso más adelante.

Le puse un "overflow-y: auto;" para que muestre el scroll cuando sea necesario.
También tuve que alterar el "global.css" para evitar que el despliegue del scroll vertical de los ListItems no añadiera el scroll horizontal

html {
  overflow-x: hidden;
}

Si alguien sabe como evitar este efecto me gustaría saberlo.

[IsaiasZc]

Para esto primero encapsule dentro de MyOrder.jsx todos los order items dentro de un div con una clase llamada order-items. Luego dentro de MyOrder.scss añadí las siguiente regla:

.order-items {
	overflow-y: auto;
	max-height: 50vh;
}

con eso pude solucionarlo 😁

[alejandroch1202]

El contenido regresado por la API fue puesto en un div y luego con CSS:

.order-container {
  overflow: auto;
  max-height: 64vh;
}