title: jQuery UI Tabs - content loaded by ajax doesn't scroll
body: <p>in INDEX.PHP
  my tabs are declared as:</p>
  
  <pre><code>$(function() {
              $( "#tabs" ).tabs({
                  load: function(event, ui) {
                      console.log("load event ran");
                      $('a', ui.panel).live("click", function() {
                             $(ui.panel).load(this.href);
                             return false;
                             });
                     }
  
             });
  
          });
  </code></pre>
  
  <p>i have tabs liked to external php file to load content:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="content.php?div=Production"&gt;Production&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="content.php?div=Digital"&gt;Digital&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>the forms on these pages are submitted by ajax:</p>
  
  <pre><code>$(document).ready(function(){
          $("#Search_form").validate({
              debug: false,
              submitHandler: function(form) {
                  $.post('search_db.php', $("#Search_form").serialize(), function(data) {
                      $('p.results').fadeIn();  
                      $('#results').html(data);
                  });
              }
          });
      });
  </code></pre>
  
  <p>results are displayed within a tab, BUT browser doesn't create vertical scrolling bar to view the content that didn't fit in the browser window.</p>
  
  <p>I understand this is s/t to do with multiple ajax functions inside each other, how can i force browser to review page content and create a scrollbar please?</p>
  
  <p>P.S. I have only general understanding of jQuery and DOM functionality... </p>