Evitar el Elemento De Crecer a Fit Elementos Infantiles

Estoy tratando de hacer una tabla con pestañas de información desplegable que aparecen cuando se desplaza sobre un término. Mi enfoque inicial fue hacer que estas pestañas de información no se muestren con display : none css regla, entonces cuando el usuario pasa el ratón sobre el texto correspondiente, la pestaña info aparece alterando la propiedad de la pantalla a display: block.

Mi problema es que no puedo averiguar cómo anular el comportamiento predeterminado para el elemento conteniendo/parente, y la tabla redimensiona para adaptarse al elemento recién aparecido, luego vuelve a ser normal cuando el usuario se desplaza. Experimenté con z-index (ajustando el td a z-index: 1 e info tab a z-index:2), así como visibility:hidden -> visibility:visible vs display:none -> display:block, pero no hay suerte con ninguno de esos. También intenté fijar la altura máxima del elemento td a 200px, pero parece que crece más allá de eso independientemente.

Aquí está el código fuente para lo que tengo hasta ahora:

/* In an attempt to prevent row from expanding automatically */

td {
  max-height: 100px;
}

.card-body {
  display: none;
  border: 2px solid black;
  height: 300px;
  width: 400px;
  z-index: 2;
}

.card-trigger:hover+.card-body {
  display: inline-block;
  position: relative;
  top: 0px;
  right: 15px;
}

.card-body:hover {
  display: block;
}

.card-body .game-info {
  display: none;
}

.card-body .dd-trigger:hover+.game-info {
  display: block;
}
Ratings by som bol


sort by release date (asc/desc), rating amout, game category, game creator, game console



Search hints


     Row 1 
    
     Row 2 
    
     row 3 
    

  
    

      Game title
      your rating
      Average rating
      
    

  
  

      
        Some Videogame
        


          picture of the game in question
          
Game title

          
Some stuff happens and you have fun

          Show more info
          
    
            
  • Average Rating: 
    • 
            
  • Average Review Score: 
    • 
          

        

      		

      
        your rating : 2
      
      
        average rating : 3
      
      
    

      
        Some Videogame
        


          picture of the game in question
          
Game title

          
Some stuff happens and you have fun

          Show more info
          
    
            
  • Average Rating: 
    • 
            
  • Average Review Score: 
    • 
          

        

      		

      
        your rating : 2
      
      
        average rating : 3
      
      
    

      
        Some Videogame
        


          picture of the game in question
          
Game title

          
Some stuff happens and you have fun

          Show more info
          
    
            
  • Average Rating: 
    • 
            
  • Average Review Score: 
    • 
          

        

      		

      
        your rating : 2
      
      
        average rating : 3

Pregunta hecha hace 3 años, 4 meses, 28 días - Por pixelpioneerc4b5

3 Respuestas:

  • Para evitar que los padres redimensionen para adaptarse al elemento contenido, debe hacer tres cosas:

    1. Establecer la posición de los padres a un pariente
    2. Establecer la posición del niño en absoluto (y colocar en el lugar apropiado utilizando la parte superior, inferior, izquierda, derecha)
    3. Establezca el elemento z del niño más alto que el de los padres. Hacemos esto para evitar que cualquier estilo padre superponga con estilos infantiles. Esencialmente hace que el elemento del niño parezca que está sentado encima del elemento padre.

    el html es un ejemplo trivial de una mesa con una fila. el css oculta el div infantil contenido por defecto, y establece la pantalla para bloquear cuando se desplaza, además de los estilos predeterminados y el posicionamiento / índice mencionado anteriormente

    table, th, td {
  border: 1px solid black;
}

.pop-up {
  display: none
}

td {
  position: relative;
}

td:hover > .pop-up {
  display: block;
}

.pop-up {
  width: 500px;
  height: 100px;
  background: red;
  border: 1px solid black;
  position: absolute;
  left: 50px;
  z-index: 1;  
}

    haga clic aquí para ver el ejemplo completo

    Respondida el Dec 18, 2020 a las 15:46 - por codecrusaderx

    Votos positivos: 0 | Votos negativos: 0

  • Para evitar que la fila de la tabla crezca cuando se muestra el contenido de la pestaña de información, puedes establecer el tamaño de la celda td que contiene la pestaña de información de manera fija en lugar de usar max-height.

    Aquí te dejo cómo podrías hacerlo:

    css
/ fija la altura de la celda que contiene la pestaña de información /
td {
  height: 100px; / ajusta la altura según tus necesidades /
  overflow: hidden; / para ocultar cualquier contenido que supere la altura /
}

.card-body {
  display: none;
  border: 2px solid black;
  height: 300px; / ajusta la altura según tus necesidades /
  width: 400px;
  z-index: 2;
  position: absolute;
}

.card-trigger:hover + .card-body {
  display: block;
}

    Con esto, la celda td mantendrá una altura fija y cualquier contenido que se desborde será ocultado, evitando que la fila de la tabla crezca a medida que se muestre el contenido de la pestaña de información.

    Además, el uso de position: absolute; en el estilo de .card-body colocará el contenido de la pestaña de información sobre el resto de la tabla, evitando que afecte el tamaño de las filas de la tabla.

    Prueba estos ajustes en tu código y deberías evitar que la fila de la tabla se expanda al mostrar el contenido de la pestaña de información.

    Respondida el Dec 19, 2020 a las 15:49 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución usando CSS Flexbox

    Para evitar que el elemento padre crezca al mostrar el elemento secundario, puedes utilizar CSS Flexbox:

    css
td {
  display: flex;
  align-items: center;
}

.card-body {
  display: none;
  border: 2px solid black;
  height: 300px;
  width: 400px;
  flex-shrink: 0;
}

    display: flex establece el elemento td como un contenedor Flexbox, lo que permite distribuir los elementos secundarios horizontalmente. align-items: center alinea los elementos secundarios verticalmente dentro del contenedor Flexbox. flex-shrink: 0 en el elemento .card-body evita que se reduzca su tamaño cuando el elemento padre se encoge.

    Solución usando JavaScript

    Otra opción es utilizar JavaScript para controlar la altura del elemento padre:

    javascript
const cardTriggers = document.querySelectorAll(".card-trigger");
const cardBodies = document.querySelectorAll(".card-body");

cardTriggers.forEach((trigger, index) => {
  trigger.addEventListener("mouseenter", () => {
    cardBodies[index].style.display = "inline-block";
  });

  trigger.addEventListener("mouseleave", () => {
    cardBodies[index].style.display = "none";
  });
});

    Este código agrega controladores de eventos de mouse para mostrar y ocultar el elemento .card-body cuando el usuario desplaza el mouse sobre el elemento .card-trigger. Establece la altura del elemento padre manualmente en el controlador mouseenter.

    Consideraciones adicionales

    Asegúrate de que el elemento .card-body esté posicionado correctamente utilizando propiedades CSS como position, top y left. * Si estás utilizando una biblioteca de JavaScript, consulta su documentación para obtener métodos alternativos para manipular el estilo de los elementos.

    Respondida el Dec 19, 2020 a las 15:50 - por Gemini

    Votos positivos: 0 | Votos negativos: 0