Poner alto auto ajustable a cada tab

[ceaped]

Buenos días
Utilizo esta galería:
https://codepen.io/frxnz/pen/arlxL

Pero cada "tab" tiene diferente alto.

Código CSS:

.slides .slide {
    position: absolute;
    top: 0;
    width: calc(20% - 1em);
    max-height: 3.5em;
    margin: 0.5em;
    padding: 0;
    color: black;
    float: left;
    overflow: hidden;
    background: #FFF;
    transition: max-height 0.25s
    ease-in-out, width
    0.25s 0.25s ease-in-out, left
    0.25s 0.5s  ease-in-out, top
    0.25s 0.75s ease-in-out;
}
 

Código CSS:

.slides .slide.active {
    width: 100%;
    max-height: 20em;
    float: none;
    position: absolute;
    top: 4.5em;
    left: 0;
    background-color: #FFF;
    transition: 
        top        0.25s 1s    ease-in-out,
        left       0.25s 1.25s ease-in-out, 
        width      0.25s 1.5s  ease-in-out, 
        max-height 0.25s 1.75s ease-in-out;
}
 

¿Cómo hago para que cada "tab" su alto se ajuste a su contenido?

Gracias por su ayuda

[ArturoGallegos]

Supongo que tu problema es porque no se ve todo el contenido, tienes de dos opciones
-> overflow:auto
a mi ver esteticamente puede ser mejor ya que mantienes un alto uniforme entre los tabs y tu diseño sera facil de acomodar.

-> max-height: none;
con esto eliminar el limite de altura y se vera todo el contenido., aqui con esta vas a tener que trabajar mas, ya que al tener position:absolute, tendrás que trabajar con el resto de tu diseño para acomodar todo.

[ceaped]

Hola ArturoGallegos

No funciona si le pongo:

Código CSS:

.slides .slide {
    position: absolute;
    top: 0;
    width: calc(20% - 1em);
    max-height: auto;
    margin: 0.5em;
    padding: 0;
    color: black;
    float: left;
    overflow: auto;
    background: #FFF;
    transition: max-height 0.25s
    ease-in-out, width
    0.25s 0.25s ease-in-out, left
    0.25s 0.5s  ease-in-out, top
    0.25s 0.75s ease-in-out;
}
 

También probé con: "max-height: none;"

¿Sabes cómo más podría hacerlo?

Gracias por tu ayuda

[DragonX]

ceaped en el ejemplo que adjuntaste / linkeaste de codepen la estructura anda perfecto. podes agregarle todo el texto que quieras y cada contenedor crece individualmente independiente de lo que contengas los otros containers.

Revisa tu codigo general, tu JS porque tal cual esta en el ejemplo deberia funcionar.
Slds

[ceaped]

Hola DragonX
El ejercicio funciona bien pero si tu agregas texto no se ajusta el alto. El tiene un alto fijo que es "max-height="20em".

Si le pones:
"max-height="auto".
"max-height="100%".

No funciona.

¿Cómo hago para que se ajuste el alto?

Gracias por tu ayuda

[DragonX]

el max-height NO es un alto fijo es un alto maximo.
Entra a codepen y editar el html y agregale mucho texto alguna de las tags (al contenido del tab) y vas a ver como crece sin cortar nada
Slds

[ceaped]

Hola DragonX
Claro ya lo hice pero no se ajusta el alto.
Siempre es un alto fijo...

Gracias por tu ayuda

[ArturoGallegos]

Yo te mencione que uses una de esas 2 reglas, utilize el enlace de tu ejemplo y efectivamente se corta despues de agregar mucho contenido, pero agregando overflow:auto, haces que muestre un scroll, mantienes lo estico y no te complicas en acomodar el resto de tu diseño.

Si quitas el max-height o lo dejas en none, (resaltese señor que es NONE, no es lo mismo que auto y me parece que este ultimo no es aceptado), el contenedor crece indefinidamente.

[ceaped]

Hola ArturoGallegos
Claro si se pone "overflow:auto" se amplía con scroll.
Pero también queda con scroll el botón. Pon el puntero sobre los botones y veras que quedan también con scroll.

Gracias por tu ayuda

[DragonX]

Si es asi solo agregale el overflow-y: auto; a tu contenedor y no a todo el UI, me explico?
Slds.-

[ceaped]

Hola ArturoGallegos y DragonX
Si tiene toda la razón agregando "overflow:auto" queda con scroll vertical.
Si saben de alguna forma para que no quede con scroll sino que se amplíe según el alto.

Gracias por su ayuda

[ArturoGallegos]

Iniciado por ArturoGallegos

Si quitas el max-height o lo dejas en none, (resaltese señor que es NONE, no es lo mismo que auto y me parece que este ultimo no es aceptado), el contenedor crece indefinidamente.

Iniciado por ceaped

Si saben de alguna forma para que no quede con scroll sino que se amplíe según el alto.

Que pedo con tu vida, por usuarios como tu es que cada vez da mas flojera responder., pero bueno hay nos veremos en otro tema, a mi ver este ya esta respondido y no amerita mas respuestas/comentarios.

Suerte!

[ceaped]

Hola ArturoGallegos
Tampoco debería responder a tu último comentario, pero no veo por que me debo quedar callado.
No es una pregunta boba, tonta o que de flojera.
Lo que para ti resulta fácil, básico o sencillo para otros no.
Es muy sencillo si no deseas responder a preguntas como la que hice...no respondes.
Cuando uno ayuda lo hace de manera desinteresada y no juzga ni critica...no busco ni deseo que me respondas a mi comentario.

[DragonX]

ceaped mas alla del ejemplo que dejaste de codepen, tendras algo 'colgado' para que pueda ver como esta quedando y en base a tu codigo ver que modificar para quitarle ese scroll.

Slds.-

[ceaped]

Hola DragonX
Yo estoy utilizando exactamente el mismo ejercicio.
Lo que yo identifico es en estos dos .css:

1.

Código CSS:

.slides .slide {  
    max-height: 3.5em;
}
 

2.

Código CSS:

.slides .slide.active {
    max-height: 20em;
}
 

El primero ".slides .slide" si le pongo "auto" lo que hace es tomar el alto total de cada contenido, o sea que cuando se abre se baja todo y hace el efecto mal de bajar el botón y abrir.

El segundo ".slides .slide.active" será el alto máximo para todos los tabs que es de 20em.
Si le pongo "auto" no funciona, si le pongo "100%" tampoco, si le pongo "height: 100%" tampoco.

Como te digo busco que cada una se amplíe de acuerdo a su contenido.

Gracias por tu ayuda

[ArturoGallegos]

@ceaped hay disculpe usted la expresión solo que haz sido un cabezota dura que no te entran ideas de usar lo que se te dice.

Pero mira como acto de buena fe te pongo esto

https://codepen.io/arturogallegos/pen/wyYLbo

Si con esto no entiendes o no lo consigues me doy un tiro.

[DragonX]

Ok ceaped hace esto y vas a ver que no necesitas nada, si algo no sale exactamente igual es porque hay algo que 'estas haciendo mal'.

Paso 1
Anda a tu ejemplo en codepen https://codepen.io/frxnz/pen/arlxL

Paso 2
Selecciona todo el HTML del ejemplo y reemplazalo por este (todo esto dentro de codepen)

Código HTML:

<div class="container">
  <h1>Slidin' Slidey Things</h1>
  <div class="slides">
    <div class="slide">
      <a href="#">The Lorem</a>
      <div class="content">
        <p>Texto MUYYY LARGO!!!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi rem ab voluptate provident voluptatum veniam cupiditate beatae expedita veritatis aliquid officia doloribus dolore maiores doloremque mollitia! A ducimus autem ut!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi rem ab voluptate provident voluptatum veniam cupiditate beatae expedita veritatis aliquid officia doloribus dolore maiores doloremque mollitia! A ducimus autem ut!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus obcaecati velit autem tenetur doloribus perferendis esse odit animi quasi deserunt recusandae perspiciatis a sapiente aliquam qui libero dolor officiis assumenda.</p>
      </div>
    </div>
    
    <div class="slide">
      <a href="#">The Ipsum</a>
      <div class="content">
        <p>Poco texto!!!</p>
      </div>
    </div>
    
    <div class="slide">
      <a href="#">The Dolor Sit Amet</a>
      <div class="content">
        <p>Texto Regular!!!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim fugiat officiis repellat reprehenderit incidunt deserunt illum eum ipsa quod nihil eligendi hic delectus quaerat. Ad sint tempore cumque mollitia reiciendis!</p>
      </div>
    </div>
  </div>
</div>
 

Paso 3
Hace click fuera del textarea de edicion de HTML y probalo.

Slds.-

[ceaped]

Hola ArturoGallegos
jejeje...me hiciste reir. Si a eso también había llegado solo que se ve mal (en mi opinión) cuando uno hace clic sobre el botón pues mira que se baja del tamaño del contenido.
OJO no te pegues el tiro...jejeje...;)-

Gracias por tu ayuda

[ceaped]

Buenos días
Me encontré con este código:

Código

Código Javascript:

$(document).ready(function() {
    var myElements = $('.slide');
    var sizeOfContent = [ "700", "200", "300", "500", "600"];
 
    $(myElements).each(function(index) {
 
        $(this).css('height', sizeOfContent[index]);
 
    });
 
});
 

Código CSS:

<div class="slide">contenido 1</div>
<div class="slide">contenido 2</div>
<div class="slide">contenido 3</div>
<div class="slide">contenido 4</div>
<div class="slide">contenido 5</div>
 

Pero me amplia cada tab automáticamente yo deseo es que se amplíen cuando se de clic sobre cada una.

Gracias por su ayuda

[ArturoGallegos]

con un if y la funcion hasClass de jquery

[ceaped]

Hola ArturoGallegos
Que lucha con este asunto...jejeje
Le busco y busco y no me da.
Me puedes indicar un ejemplo por favor.

Gracias por tu ayuda