pestañas jquery-ui contenido desborda contenedor

Tengo un problema con el contenido de la pestaña jquery-ui que se extiende más allá del ancho de la ventana del navegador. En mi proyecto, tengo una tabla demasiado amplia, pero en el ejemplo provisto, acabo de hacer un div con un ancho de 2000 px para ilustrar el problema. El área con pestañas se mantiene dentro del ancho del 100% (solo el ancho de la ventana del navegador) mientras que el resto de mi contenido es mucho más grande y desborda el área con pestañas jquery ui envuelta.pestañas jquery-ui contenido desborda contenedor

Puedo solucionar el problema envolviendo el contenido en un div con overflow-y: auto, pero esperaba que el área con pestañas se expandiera con mi contenido para poder utilizar las barras de desplazamiento del navegador nativo, en lugar de usar un divs barras de desplazamiento.

He probado jquery-ui 1.8.1, 1.8.5 y 1.8.16.

¿Alguien tiene alguna idea al respecto?

Aparentemente no puedo publicar una imagen porque no tengo suficientes representantes.

<!DOCTYPE html> 
<head> 
<link type="text/css" href="css/smoothness/jquery-ui-1.8.1.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 

<script> 
$(function() { 
    alert("TEST"); 
    $("#tabs").tabs(); 
}); 
</script> 
</head> 
<body> 
<div id="tabs"> 
    <ul> 
     <li> 
      <a href="#tabs-1">Work Request Information</a> 
     </li> 
     <li> 
      <a href="#tabs-2">Assessments</a> 
     </li> 
     <li> 
      <a href="#tabs-3">Work Items</a> 
     </li> 
     <li> 
      <a href="#tabs-4">Documents</a> 
     </li> 
    </ul> 
    <div id="tabs-1"> 
    </div> 
    <div id="tabs-2"> 
     <div style="background-color:red;height:200px;width:2000px;"></div> 
    </div> 
    <div id="tabs-3"> 
    </div> 
    <div id="tabs-4"> 
    </div> 
</div> 
</body> 
</html>

Fuente

2011-12-09 tfcmaster9

Intente establecer la propiedad css width para #tabs.

$('#tabs').css('width','2000px');

Fuente

2011-12-09 02:08:16 rkw

Esto funciona, pero el contenido que ocupa el contenedor es dinámico, por lo que nunca sabré cuál será el tamaño. A menos que, por supuesto, haga algo de hacking de JS para encontrar el ancho máximo de los elementos en el contenedor, pero esperaba evitar eso si hay una solución de CSS limpia. – tfcmaster9

Ver si la propiedad de ancho máximo funciona. Para jQuery, debería ser 'max_width' en su lugar; lo convertirá – rkw

Creo que esto puede ser lo más cerca que voy a llegar a una solución, o eliminar el borde del contenedor en sí. ¡Gracias! – tfcmaster9

-1

De la hoja de estilo jQuery UI:

.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */

Fuente

2011-12-09 03:30:52 Terry

No estoy seguro de a qué te refieres aquí. Esta línea no parece solucionar el problema actual. También ocurre en FF. – tfcmaster9

tuve un problema similar. Disculpe que todos los pobres se hayan quedado sin detalles, el proyecto en el que estoy trabajando está sujeto a un acuerdo de confidencialidad.

Esta era la cuestión, donde las pestañas se cubrieron los DIV contenedor: tabs's overlaying div's

que se curó llamando:

$('.tabs').css('height','auto');

Resultado final: tabs not overflowing div's anymore

Esperamos que esto pueda ser de usar a alguien.

Fuente

2014-02-05 12:43:17

pestañas jquery-ui contenido desborda contenedor

Respuesta

Cuestiones relacionadas