vertical - selected tab jquery
Pestañas jQuery: el panel cubre pestañas al 100% de altura (10)
No veo la necesidad de usar javascript aquí para modificaciones de estilo básico. Recientemente, convertí una aplicación de estilo de pantalla completa de una sola página de hacer todo el cambio de javascript a CSS puro usando posicionamiento y demás.
Ahora en una solución: prueba esto.
#tab-1 {
background: green;
height: 100%;
}
No veo la necesidad de utilizar el posicionamiento absoluto en el elemento del cuadro verde porque el padre llena el espacio, todo lo que necesita hacer ahora es la height: 100% y debe llenar el resto del espacio.
Editar
Parece que hay un problema con el contenido que no se desplaza en esta versión. Luchando para encontrar una solución para esto. Siento que jQuery UI está agregando un montón de estilos y cosas a la div #tab-1 que podría estar causando tu problema. Podría valer la pena intentar restablecer los estilos para #tab-1 y ver qué te deja.
Intento usar los widgets de pestañas de jQuery-UI que tienen contenido de paneles para extenderlo a todo el espacio disponible.
Aquí hay una versión simplificada de lo que tengo hasta ahora: http://jsfiddle.net/MhEEH/3/
Verá que el contenido del panel verde de # tab-1 solo cubre toda la página, en lugar de solo el espacio del panel, cuando uso el siguiente CSS:
#tab-1 {
background: green;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Podría usar "top: 27px"; arreglar eso, pero esto chocaría con dos cosas:
- Si cambio las pestañas "tema", la altura (27px) podría cambiar
- Si tengo muchas pestañas, tendré una segunda fila debajo de la primera fila. Entonces el contenido de mi panel cubriría esta segunda fila ...
Una solución limpia y corta estaría bien.
JavaScript es aceptable, mientras que una solución CSS (¡limpia!) Sería preferible ...
-- Saludos,
Stefan
¿Es esto lo que buscas?
html, body {
height: 100%;
}
#tabs {
position: absolute;
top: 0;
bottom:0;
left: 0;
right: 0;
}
#tab-1 {
background: green;
height: 100%;
}
Solo traté de usar esto:
#tab-1 {
background: green;
position: relative;
height:100%;
}
y en jsfiddle funciona bien. no estoy seguro de cómo será en su página http://jsfiddle.net/MhEEH/7/
Traté de poner las pestañas en un contenedor de pestañas y con los siguientes estilos
#tab-container {position:relative; min-height:100%;}
y pareció funcionar:
OP,
Mira este violín .
El padre #tabs tiene overflow: hidden; . Además de los elementos #tabs div[id*=tab] : #tabs div[id*=tab] con overflow:auto configuración overflow:auto . Esto asegura que el padre establecerá los límites, y en el caso de que haya contenido desbordado en la pestaña, la apariencia de la barra de desplazamiento será delegada por la pestaña misma.
Además, solo para aquellos que no estén familiarizados con la sintaxis #tabs div[id*=tab] , este comodín coincidirá con cualquier div secundaria de #tabs cuyo id contiene "tab". Esto se puede lograr de varias maneras, pero elegí esta ruta para el prototipado rápido.
Espero que esto ayude.
¿Qué tal esto? Con esto, verá la barra de desplazamiento completamente visible si el contenido se desborda
<div id="tab-1" class="customPanel">This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!</div>
y proporcionar estilo para la clase, con esto
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
#tabs {
position: absolute;
top: 0;
bottom:0;
left: 0;
right: 0;
overflow:auto;
}
#tabs .customPanel {
background: green;
}
¡¡¡Espero que esto ayude!!!
Agregué un valor de posición superior a la identificación # tab-1 para presionarlo debajo de la pestaña.
Ver: http://jsfiddle.net/MhEEH/40/
Aquí está el CSS pertinente:
#tab-1 {
background: green;
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
}
¡Espero eso ayude!
La solución más simple, dos cambios en CSS y un problema resuelto, #tabs{height:100%;}
y #tab-1{top:45px;}
esto hará :) actualizado violín
En lugar de usar su propio CSS, use la función incorporada de jQuery UI.
var tabs = $("#tabs").tabs({heightStyle: "fill"});
De la documentación API :
heightStyle
Tipo: Cadena
Predeterminado: "contenido"
Controla la altura del widget de pestañas y cada panel. Valores posibles:
- "auto": todos los paneles se establecerán a la altura del panel más alto.
- "llenar": amplía a la altura disponible en función de la altura principal de las pestañas.
- "contenido": cada panel será tan alto como su contenido.
Aunque tiene razón en que una solución simple de CSS sería muy buena, ya que está usando JavaScript de todos modos para crear la funcionalidad de pestaña, lo mejor será usar las capacidades existentes del script que ya tiene.
ACTUALIZAR :
Consulte http://jsfiddle.net/MhEEH/45/ para obtener el ejemplo completo más simple. Tenga en cuenta que no necesita ninguna regla de
positionCSS.Debe usar http://benalman.com/projects/jquery-resize-plugin/ (o similar) para ver los cambios de tamaño del padre. Los navegadores solo activan el evento de cambio de
resizeen la ventana de forma predeterminada, pero este complemento amplía el soporte para ese evento a los elementos arbitrarios que se cambian de tamaño.
A continuación hay un enlace a mi solución de CSS con suerte que funcione para usted
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
#tab-list {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
}
#tabs {
position: absolute;
top: 0;
bottom:0;
left: 0;
right: 0;
}
#tab-1, #tab-2 {
background: green;
position: absolute;
top: 48px;
bottom: 0;
left: 0;
right: 0;
padding-top: 10px;
}
Alguien ha mencionado el control deslizante Coda, que también es una gran solución y, como alternativa, podría sugerir este deslizador de contenido elástico de codrops
http://tympanus.net/codrops/2013/02/26/elastic-content-slider/
Espero eso ayude,
Aclamaciones