Foros del Web » Creando para Internet » CSS »

Poner alto auto ajustable a cada tab

Estas en el tema de Poner alto auto ajustable a cada tab en el foro de CSS en Foros del Web. Buenos días Utilizo esta galería: https://codepen.io/frxnz/pen/arlxL Pero cada "tab" tiene diferente alto. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original .slides .slide {     position : ...
  #1 (permalink)  
Antiguo 22/02/2018, 07:43
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.115
Antigüedad: 14 años, 4 meses
Puntos: 9
Pregunta Poner alto auto ajustable a cada tab

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

Pero cada "tab" tiene diferente alto.

Código CSS:
Ver original
  1. .slides .slide {
  2.     position: absolute;
  3.     top: 0;
  4.     width: calc(20% - 1em);
  5.     max-height: 3.5em;
  6.     margin: 0.5em;
  7.     padding: 0;
  8.     color: black;
  9.     float: left;
  10.     overflow: hidden;
  11.     background: #FFF;
  12.     transition: max-height 0.25s
  13.     ease-in-out, width
  14.     0.25s 0.25s ease-in-out, left
  15.     0.25s 0.5s  ease-in-out, top
  16.     0.25s 0.75s ease-in-out;
  17. }

Código CSS:
Ver original
  1. .slides .slide.active {
  2.     width: 100%;
  3.     max-height: 20em;
  4.     float: none;
  5.     position: absolute;
  6.     top: 4.5em;
  7.     left: 0;
  8.     background-color: #FFF;
  9.     transition:
  10.         top        0.25s 1s    ease-in-out,
  11.         left       0.25s 1.25s ease-in-out,
  12.         width      0.25s 1.5s  ease-in-out,
  13.         max-height 0.25s 1.75s ease-in-out;
  14. }


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

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario

Última edición por ceaped; 22/02/2018 a las 07:55 Razón: Agregar texto
  #2 (permalink)  
Antiguo 24/02/2018, 13:03
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.025
Antigüedad: 10 años, 3 meses
Puntos: 976
Respuesta: Poner alto auto ajustable a cada tab

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.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 26/02/2018, 04:47
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.115
Antigüedad: 14 años, 4 meses
Puntos: 9
Respuesta: Poner alto auto ajustable a cada tab

Hola ArturoGallegos

No funciona si le pongo:

Código CSS:
Ver original
  1. .slides .slide {
  2.     position: absolute;
  3.     top: 0;
  4.     width: calc(20% - 1em);
  5.     max-height: auto;
  6.     margin: 0.5em;
  7.     padding: 0;
  8.     color: black;
  9.     float: left;
  10.     overflow: auto;
  11.     background: #FFF;
  12.     transition: max-height 0.25s
  13.     ease-in-out, width
  14.     0.25s 0.25s ease-in-out, left
  15.     0.25s 0.5s  ease-in-out, top
  16.     0.25s 0.75s ease-in-out;
  17. }

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

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

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #4 (permalink)  
Antiguo 26/02/2018, 05:38
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.387
Antigüedad: 16 años
Puntos: 167
Respuesta: Poner alto auto ajustable a cada tab

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
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #5 (permalink)  
Antiguo 26/02/2018, 06:33
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.115
Antigüedad: 14 años, 4 meses
Puntos: 9
Respuesta: Poner alto auto ajustable a cada tab

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
__________________
Diseñador Gráfico publicitario
  #6 (permalink)  
Antiguo 26/02/2018, 07:20
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.387
Antigüedad: 16 años
Puntos: 167
Respuesta: Poner alto auto ajustable a cada tab

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
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #7 (permalink)  
Antiguo 26/02/2018, 07:30
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.115
Antigüedad: 14 años, 4 meses
Puntos: 9
Respuesta: Poner alto auto ajustable a cada tab

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

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #8 (permalink)  
Antiguo 26/02/2018, 08:24
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.025
Antigüedad: 10 años, 3 meses
Puntos: 976
Respuesta: Poner alto auto ajustable a cada tab

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.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #9 (permalink)  
Antiguo 26/02/2018, 08:31
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.115
Antigüedad: 14 años, 4 meses
Puntos: 9
Respuesta: Poner alto auto ajustable a cada tab

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
__________________
Diseñador Gráfico publicitario
  #10 (permalink)  
Antiguo 26/02/2018, 08:44
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.387
Antigüedad: 16 años
Puntos: 167
Respuesta: Poner alto auto ajustable a cada tab

Si es asi solo agregale el overflow-y: auto; a tu contenedor y no a todo el UI, me explico?
Slds.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #11 (permalink)  
Antiguo 26/02/2018, 09:08
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.115
Antigüedad: 14 años, 4 meses
Puntos: 9
Respuesta: Poner alto auto ajustable a cada tab

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
__________________
Diseñador Gráfico publicitario
  #12 (permalink)  
Antiguo 26/02/2018, 09:15
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.025
Antigüedad: 10 años, 3 meses
Puntos: 976
Respuesta: Poner alto auto ajustable a cada tab

Cita:
Iniciado por ArturoGallegos Ver Mensaje
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.
Cita:
Iniciado por ceaped Ver Mensaje
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!
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #13 (permalink)  
Antiguo 26/02/2018, 09:24
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.115
Antigüedad: 14 años, 4 meses
Puntos: 9
Respuesta: Poner alto auto ajustable a cada tab

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.
__________________
Diseñador Gráfico publicitario
  #14 (permalink)  
Antiguo 26/02/2018, 09:47
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.387
Antigüedad: 16 años
Puntos: 167
Respuesta: Poner alto auto ajustable a cada tab

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.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #15 (permalink)  
Antiguo 26/02/2018, 11:21
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.115
Antigüedad: 14 años, 4 meses
Puntos: 9
Respuesta: Poner alto auto ajustable a cada tab

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

1.
Código CSS:
Ver original
  1. .slides .slide {  
  2.     max-height: 3.5em;
  3. }

2.
Código CSS:
Ver original
  1. .slides .slide.active {
  2.     max-height: 20em;
  3. }

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
__________________
Diseñador Gráfico publicitario
  #16 (permalink)  
Antiguo 26/02/2018, 11:40
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.025
Antigüedad: 10 años, 3 meses
Puntos: 976
Respuesta: Poner alto auto ajustable a cada tab

@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.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #17 (permalink)  
Antiguo 26/02/2018, 12:20
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.387
Antigüedad: 16 años
Puntos: 167
Respuesta: Poner alto auto ajustable a cada tab

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:
Ver original
  1. <div class="container">
  2.   <h1>Slidin' Slidey Things</h1>
  3.   <div class="slides">
  4.     <div class="slide">
  5.       <a href="#">The Lorem</a>
  6.       <div class="content">
  7.         <p>Texto MUYYY LARGO!!!</p>
  8.         <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>
  9.         <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>
  10.         <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>
  11.       </div>
  12.     </div>
  13.    
  14.     <div class="slide">
  15.       <a href="#">The Ipsum</a>
  16.       <div class="content">
  17.         <p>Poco texto!!!</p>
  18.       </div>
  19.     </div>
  20.    
  21.     <div class="slide">
  22.       <a href="#">The Dolor Sit Amet</a>
  23.       <div class="content">
  24.         <p>Texto Regular!!!</p>
  25.         <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>
  26.       </div>
  27.     </div>
  28.   </div>
  29. </div>

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

Slds.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #18 (permalink)  
Antiguo 26/02/2018, 12:21
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.115
Antigüedad: 14 años, 4 meses
Puntos: 9
Respuesta: Poner alto auto ajustable a cada tab

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
__________________
Diseñador Gráfico publicitario
  #19 (permalink)  
Antiguo 13/03/2018, 09:21
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.115
Antigüedad: 14 años, 4 meses
Puntos: 9
Respuesta: Poner alto auto ajustable a cada tab

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

Código

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.     var myElements = $('.slide');
  3.     var sizeOfContent = [ "700", "200", "300", "500", "600"];
  4.  
  5.     $(myElements).each(function(index) {
  6.  
  7.         $(this).css('height', sizeOfContent[index]);
  8.  
  9.     });
  10.  
  11. });

Código CSS:
Ver original
  1. <div class="slide">contenido 1</div>
  2. <div class="slide">contenido 2</div>
  3. <div class="slide">contenido 3</div>
  4. <div class="slide">contenido 4</div>
  5. <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
__________________
Diseñador Gráfico publicitario
  #20 (permalink)  
Antiguo 13/03/2018, 10:33
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.025
Antigüedad: 10 años, 3 meses
Puntos: 976
Respuesta: Poner alto auto ajustable a cada tab

con un if y la funcion hasClass de jquery
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #21 (permalink)  
Antiguo 13/03/2018, 13:11
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.115
Antigüedad: 14 años, 4 meses
Puntos: 9
Respuesta: Poner alto auto ajustable a cada tab

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
__________________
Diseñador Gráfico publicitario



La zona horaria es GMT -6. Ahora son las 15:37.