jQuery UI Tab nie przewijania z pojemnika

Setup:jQuery UI Tab nie przewijania z pojemnika

Mam elementu div, które mają za zadanie być przewijane. Jest to kontener dla mojego elementu div zakładki jquery ui.

Problem:

Kiedy przewijać pojemnik w IE8 przewija innych treści w nim, ale karta UI jQuery jest stałe, jakby pozycji = stałe. Działa dobrze w FF. Każda pomoc mile widziany. Dziękujemy

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>

Źródło

2011-07-25 Alan Alcock

Co dobrze uformowane pytanie.+1 – Phil

Nadal brak odpowiedzi jest dziwna, mam ten sam problem i minęło już kilka miesięcy. –

Mam również ten problem i spędziłem bardzo długo pracując nad poprawką, bez skutku do tej pory. Napiszę odpowiedź, jeśli ją wymyślę –

Dodaj position:relative do przewijanego pojemnika. Jest to typowy problem w IE.

Źródło

2012-04-26 18:42:22 alekop

mam dokładnie te same problemy z innymi komponentami - przełączniki i suwak. Kiedy używam do tego standardowych składników, nie mam żadnych problemów, ale występuje tylko z biblioteką jquery ui, więc przypuszczam, że jest to błąd jQuery UI.

Nie można odtworzyć w przeglądarkach Firefox/Chrome i IE9 - tylko IE7/IE8.

Źródło

2011-07-30 15:07:00 Insight

Miałem ten sam problem w IE7 i kilku innych i spędziłem kilka godzin próbując każdej poprawki, o jakiej moglibyśmy myśleć, ale bezskutecznie. Doszedłem do wniosku, że nie warto go kontynuować, aby kontynuować debugowanie czegoś, co prawdopodobnie było błędem w jquery UI (dla IE7) i przepisać wszystkie JS w trzech linijkach jquery. Dla odniesienia, jeśli ktoś inny zmaga się z tym, to właśnie zrobiłem.

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>

istotne css (używając SCSS tutaj)

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

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

    &.hidden { visibility: hidden; } 
}

javascript (wymaga jQuery)

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

Mam nadzieję, że to pomoże komuś. Jest to prawdopodobnie o wiele mniejsza waga niż użycie wtyczki pełnej zakładki, w szczerości i całkiem dobrze wykonanej pracy. Jeśli nie jest to wystarczająco kompletne lub nie możesz uruchomić tego kodu, napisz do mnie komentarz, a ja ci pomogę lub przygotuję js fiddle.

Źródło

2012-01-05 22:40:54

Spróbuj następujący:

Określ wysokość kontenera jako:

.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>

Źródło

2016-10-02 14:35:28

jQuery UI Tab nie przewijania z pojemnika

Odpowiedz

Powiązane problemy