jQuery UI Tab no desplazándose con contenedor

Configuración:jQuery UI Tab no desplazándose con contenedor

tengo un div que contiene el cual está destinado a ser desplazable. Este es un contenedor para mi div en jquery ui tab.

Problema:

Cuando me desplazo el contenedor en IE8 se desplaza de otros contenidos en ella, pero la ficha Interfaz de usuario jQuery se fija como si la posición = fijo. Funciona bien en FF. Cualquier ayuda bienvenida. Muchas gracias

CSS:

#content { 
    overflow:auto; 
    margin: 1px; 
    height: 700px; 
} 

div.content-container { 
    border: solid 1px #C8C8C8; 
    padding:10px; 
    background-color: #F5F3E5; 
    margin: 1px 2px 10px 1px; 
}

JS:

$('#tabs').tabs();

html:

<div id="content"> 
    <div class="content-container"> 
     <div id="tabs"> 
     </div> 
    </div> 
</div>

Fuente

2011-07-25 Alan Alcock

Qué pregunta más bien formada.+1 – Phil

Todavía ninguna respuesta es impar, tengo el mismo problema y ya han pasado un par de meses. –

También estoy teniendo este problema y he pasado mucho tiempo trabajando en una solución inútil hasta el momento. Voy a publicar una respuesta si lo resuelvo –

Agregue position:relative al contenedor de desplazamiento. Este es un problema común en IE.

Fuente

2012-04-26 18:42:22 alekop

tengo el exactamente los mismos problemas con otros componentes: alterna y control deslizante. Cuando uso componentes estándar para esto no tengo problemas, pero ocurre solo con la biblioteca de jquery ui, así que supongo que es un error de jQuery UI.

No se puede reproducir en Firefox/Chrome e IE9 - solo IE7/IE8.

Fuente

2011-07-30 15:07:00 Insight

Tuve este mismo problema en IE7 y algunos otros y pasé un par de horas intentando cada solución que pudiéramos pensar, pero fue en vano. Pensé que no valía la pena continuar la depuración de algo que probablemente era un error en jquery UI (para IE7) y reescribí todas las JS en tres líneas de jquery. Como referencia, si alguien más está luchando con eso, esto es lo que hice.

html

<div id='tabs'> 

    <ul> 
    <li><a href='#tab-1'></a><li> 
    <li><a href='#tab-2'></a><li> 
    <li><a href='#tab-3'></a><li> 
    </ul> 

    <div id='tab-1'> 
    <p>Some content</p> 
    </div> 
    <div id='tab-2'> 
    <p>Some content</p> 
    </div> 
    <div id='tab-3'> 
    <p>Some content</p> 
    </div> 

</div>

CSS relevante (usando SCSS aquí)

#tabs { 
    position: relative; 
    height: 250px; /* whatever the height is of your container */ 

    & > div { 
    position: absolute; 
    top: 0; 
    margin-top: 10px; 

    &.hidden { visibility: hidden; } 
}

Javascript (requiere jQuery)

$('#tabs li a').click(function(){ 
    $('#tabs > div').addClass('hidden'); 
    $($(this).attr('href')).removeClass('hidden'); 
});

Espero que esto ayude a alguien. Esto es probablemente mucho más ligero que usar el plugin de pestañas completas de todos modos, con toda honestidad, y hace el trabajo bastante bien. Si esto no es lo suficientemente completo o no puedes hacer que funcione este código, envíame un comentario y te ayudaré o pondré un violín js.

Fuente

2012-01-05 22:40:54

seguir los siguientes pasos:

definir la altura del contenedor como:

.content_container_1 {max-width: 400px; width: 'auto'; height: 550px; margin: 10px 0px 0px 10px; } 
 
    
 
/* Tabs 
 
--------------------------------------------------- */ 
 
#tabs li { text-align:center;font:normal 10px; font-family: "Segoe UI", Arial, Sans-serif; } 
 
#tabs p { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } 
 
#tabs .tabs_img {  float: left;  background-color: #aaa;  margin: 0px 0px 0px 0px; } 
 
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; } 
 
#tabs {height: 100%; overflow: 'auto';}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Creating a windows-like interface with jQuery UI</title> 
 
     <!-- Load the jQuery UI CSS --> 
 

 
     <link rel="stylesheet" type="text/css" href="mtl.css"> 
 
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
     <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" /> 
 
      
 
     <!-- Load jQuery first before jQuery UI! --> 
 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 
 

 
     <script> 
 
      $(document).ready(function() { 
 
       //$('#draggable3').dialog({width:'auto',height:'auto'}); 
 
      // $('#tab_container').dialog({width:'600px',height:'auto'}); 
 
       $("#tabs").tabs(); 
 
      // $('#tab_container').dialog({width:'600px',height:'auto'}); 
 
       }) 
 
     </script> 
 

 
     <style> 
 
/* Style sheets for tab.*/ 
 

 
/* Containers 
 
--------------------------------------------------- */ 
 
.content_container_1 {max-width: 400px; width: 'auto'; height: 550px; margin: 10px 0px 0px 10px; } 
 
    
 
/* Tabs 
 
--------------------------------------------------- */ 
 
#tabs li { text-align:center;font:normal 10px; font-family: "Segoe UI", Arial, Sans-serif; } 
 
#tabs p { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } 
 
#tabs .tabs_img {  float: left;  background-color: #aaa;  margin: 0px 0px 0px 0px; } 
 
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #336666; background: #32646b url(images/ui-bg-1.png) 50% 50% repeat-x; font-weight: bold; color: #fff; } 
 
#tabs {height: 100%; overflow: 'auto';} 
 

 
     </style>   
 

 
    </head> 
 
<body> 
 

 
<!-- Begin Tabs Container --> 
 
<div id="tab_container" class="dialog_window" title="Tab Window Title"> 
 
    <div class="content_container_1"> 
 
<!-- Begin Tabs Area --> 
 
    <div id="tabs"> 
 
     <ul> 
 
      <li><a href="#tabs-1">jQuery UI</a></li> 
 
      <li><a href="#tabs-2">jQuery</a></li> 
 
      <li><a href="#tabs-3">ThemeRoller</a></li> 
 
     </ul> 
 
     
 
     <!-- Begin Tabs Section #1 --> 
 
     <div id="tabs-1" style='max-width:400px;height:450px;overflow:auto; '> 
 
      <p> 
 
      <img class="tabs_img" src="images/jquery_ui.png" width="325" height="225" alt="jQuery UI" /><a href="http://jqueryui.com/" target="_blank" title="jQuery UI">jQuery UI</a> was built on top of the jQuery library and features ready to use widgets, advanced effects, animation, and much more. 
 
      </p> 
 
      <p> 
 
      Featuring a powerful and unique CSS theme framework, Themeroller tool and pre-made theme gallery, jQuery UI makes customizing your application fast and easy. 
 
      </p> 
 
      <p> 
 
      Detailed documentation and tutorials available on the <a href="http://jqueryui.com/" target="_blank" title="jQuery UI Official Website">official website</a> allow you to start using and learning jQuery UI right away. jQuery UI is also supported by a large and enthusiastic community of web developers. 
 
      </p> 
 
      <p> 
 
      <a href="http://jqueryui.com/" target="_blank" title="Visit The jQuery UI Website">Visit The Official jQuery UI Website</a> 
 
      </p> 
 
     </div> 
 
     <!-- End Tabs Section #1 --> 
 
    
 
     <!-- Begin Tabs Section #2 --> 
 
     <div id="tabs-2" style='max-width:400px;height:450px;overflow:auto;'> 
 
      <p> 
 
      <img class="tabs_img" src="images/jquery.png" width="325" height="225" alt="jQuery" /><a href="http://jquery.com/" target="_blank" title="jQuery">jQuery</a> is a very popular cross browser JavaScript library that features event handling, animation, Ajax interactions and more for rapid web development. 
 
      </p> 
 
      <p> 
 
      On the official jQuery website you can find <a href="http://docs.jquery.com/" target="_blank" title="detailed documentation">detailed documentation</a>, <a href="http://forum.jquery.com/" target="_blank" title="forums">forums</a> with thousands of posts and responses, information on <a href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" target="_blank" title="How to use jQuery with other Libraries">How to use jQuery with other Libraries</a> and much more. 
 
      </p> 
 
      <p> 
 
      jQuery is lightweight, CSS3 compliant and cross browser tested. jQuery was designed to change the way developers write JavaScript! 
 
      </p> 
 
      <p> 
 
      <a href="http://jquery.com/" target="_blank" title="Visit the jQuery Website">Visit the Official jQuery Website</a> 
 
      </p> 
 
     </div> 
 
     <!-- End Tabs Section #2 --> 
 
    
 
     <!-- Begin Tabs Section #3 --> 
 
     <div id="tabs-3" style='max-width:400px;height:450px;overflow:auto;'> 
 

 
     <div id="draggable3" class="dialog_window" title="Traced Modules Minimize"> 
 
      <div class="css-tvw"> 
 
       <ul><li><input type="checkbox" id="Node_2" checked="checked" /><label for="Node_2"><a>SubmitBWTable [ Submit ]</a></label> 
 
       <ul> 
 
       <li><input type="checkbox" id="Node_3" checked="checked" /><label class=moduleM for="Node_3">checkUserLogin [ Common ]</label> 
 
       <ul> 
 
       <li><input type="checkbox" id="Node_4" checked="checked" /><label class=classM for="Node_4">ActivateWindow [ frmConflictManagement ]</label> 
 
       <ul> 
 
       <li><input type="checkbox" id="Node_5" checked="checked" /><label class=sheetM for="Node_5">populateListBoxControls [ frmConflictManagement ]</label> 
 
       <ul> 
 
       <li><input type="checkbox" id="Node_6" checked="checked" /><label class=workbookM for="Node_6">clearLables [ frmConflictManagement ]</label> 
 
       </li> 
 
       </ul> 
 
       <ul><li><input type="checkbox" id="Node_2" checked="checked" /><label for="Node_2">SubmitBWTable [ Submit ]</label> 
 
       <ul> 
 
       <li><input type="checkbox" id="Node_3" checked="checked" /><label class=moduleM for="Node_3">checkUserLogin [ Common ]</label> 
 
       <ul> 
 
       <li><input type="checkbox" id="Node_4" checked="checked" /><label class=classM for="Node_4">ActivateWindow [ frmConflictManagement ]</label> 
 
       <ul> 
 
       <li><input type="checkbox" id="Node_5" checked="checked" /><label class=sheetM for="Node_5">populateListBoxControls [ frmConflictManagement ]</label> 
 
       <ul> 
 
       <li><input type="checkbox" id="Node_6" checked="checked" /><label class=workbookM for="Node_6">clearLables [ frmConflictManagement ]</label> 
 
       </li> 
 
       </ul>  
 
      </div> 
 
     </div> 
 

 
     </div> 
 
     <!-- End Tabs Section #3 --> 
 
    </div> 
 
    <!-- End Tabs Area --> 
 
    </div> 
 
    
 
</div> 
 
<!-- End Tabs Container --> 
 
</body> 
 
</html>

Fuente

2016-10-02 14:35:28

jQuery UI Tab no desplazándose con contenedor

Respuesta

Cuestiones relacionadas