0

He creado un array de cartas que se renderiza como quería el problema que tengo es que aunque el resto de componentes se renderizan también y se muestran en la consola y en la estructura de la página, estos aparecen más abajo y no me deja hacer scroll hacia ellos, he intentado usar ScrollView pero visto como funciona he entendido que no sirve para lo que quiero hacer.

Adjunto código

import React from 'react';
import axios from 'axios';
import './Home.css';

// Estructura de los datos en React
export default class FetchEquipo extends React.Component {
    state = {
        loading: true,
        equipos: []
    };

    // Inicio de la petición asincrona a la API
    async componentDidMount() {
        const url = "http://localhost:8000/api/Equipos/?format=json";
        // Await de la función para esperar a la respuesta asincrona y obtener los datos
        const response = await axios.get(url);
        const data = await response.data;
        // Cambio del estado de los datos porque llegado aquí ya se han recibido
        this.setState({ equipos: data, loading: false });

    }

    render() {
        // Mostrará un escenario dependiendo de si estan o no cargados los datos
        if (this.state.loading === true) {
            return (
                <div>
                    <p>Loading...</p>
                </div>
            );
        }
        else if (!this.state.equipos.length === null) {
            return (
                <div>
                    <p>No se encontraron datos de los equipos</p>
                </div>
            );
        }
        else{
            // Mapeo del array de equipos por cada uno de los equipos
            const equiposJSx = [];
            this.state.equipos.forEach(equipo => {
                equiposJSx.push(
                    // Componente raíz del grupo al que se le pasa una key unica en este caso ek nombre del equipo
                    <div className='card-container' key={equipo.Equipo}>
                        <div className='image-container'>
                            <img src={equipo.Equipo}/>
                        </div>
                        <div className='card-content'>
                            <div className='card-title'>
                                <h3>{equipo.Equipo}</h3>
                            </div>
                            <div className='card-body'>
                                <p>Valor total: {equipo.ValorTotal}</p>
                                <p>Valor Medio: {equipo.ValorMedio}</p>
                                <p>Jugadores: {equipo.Jugadores}</p>
                                <p>Edad media: {equipo.EdadMedia}</p>
                            </div>
                        </div>
                    </div>
                );
            });

            return (
                    <div className="row">
                        {equiposJSx}
                    </div>
            );
        }
    }
}

Adjunto imagen del problema Adjunto imagen del problema

Como veis en la imagen no se muestra ninguna scrollbar ni nada, he probado usando flatlist pero tampoco se adapata a lo que quiero que es poder hacer scroll hacía abajo para así poder ver el resto de componentes

Edit 1: En el css tengo el overflow puesto en hidden

.card-container{
    margin-left: 15%;
    margin-top: 10%;
    width: 300px;
    overflow: hidden;
    box-shadow: 0px 0px 15px -5px;
    transition: 0.5s;
    animation: ease-in;
    background-color: aliceblue;
}
.card-container:hover{
    transform: scale(1.1);
    box-shadow: 0px 0px 15px 0px;
}
.image-container img{
    overflow: hidden;
    height: 200px;
}
.card-content{
    margin: 1rem;
    margin-top: 0.9rem;
}
h3, p{
    margin: 0;
    padding: 0;
}
.card-title{
    margin-bottom: 0.5rem;
}
3
  • 1
    Puedes mostrar tu css? Posiblemente la propiedad overflow es la que comúnmente maneja la posibilad de scrollear
    – Japsz
    el 15 abr. 2021 a las 14:16
  • Tienes los estilos de la clase App? ponle overflow: scroll y debiése funcionar
    – Japsz
    el 15 abr. 2021 a las 14:47
  • Lo tengo puesto en scroll en la app pero tampoco funciona
    – Estiwer
    el 15 abr. 2021 a las 14:50

1 respuesta 1

2

Segun la documentación de overflow:

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

Tratando de emular el caso que tienes (sin definir la propiedad height):

.card-container {
  overflow: scroll;
  box-shadow: 0px 0px 15px -5px;
  transition: 0.5s;
  animation: ease-in;
  background-color: aliceblue;
}

.image-container {
  margin: 50px;
  background-color: red;
  height: 200px;
  width: 80%;
}
<div class="card-container">
  <div class="image-container">
  </div>
  <div class="image-container">
  </div>
  <div class="image-container">
  </div>
  <div class="image-container">
  </div>
  <div class="image-container">
  </div>
</div>

Nota como el scrollbar del div contendor no funciona, en cambio con la propiedad height definida, como especifica la documentación:

.card-container {
  overflow: scroll;
  height: 100vh;
  box-shadow: 0px 0px 15px -5px;
  transition: 0.5s;
  animation: ease-in;
  background-color: aliceblue;
}

.image-container {
  margin: 50px;
  background-color: red;
  height: 200px;
  width: 80%;
}
<div class="card-container">
  <div class="image-container">
  </div>
  <div class="image-container">
  </div>
  <div class="image-container">
  </div>
  <div class="image-container">
  </div>
  <div class="image-container">
  </div>
</div>

En tu caso tendrías que envolver tus elementos con el div que tenga el overflow:scroll y una altura definida por medio de height.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.