how do you set the jquery tabs to form a 100% height?

Question

how do you set the jquery tabs to form a 100% height?

i also need to resize the iframe within it to expand to 100% height.

thank you!

Answer 1

have you tried try setting height property using CSS method:

$("#ID OF YOUR TAB ELEMENT").css("height","100%");

Answer 2

You can use a div with height:100% to have the tab contents expand to cover the whole screen height.

For iframe resizing see here.

Answer 3

I don't think you can do it reliably (cross browser) with just css.

Maybe you should use jquery to get the height of the page and set each element like that:

$(window).resize(function() {
   var wh = parseInt($(window).height());

   if ($.browser.opera) {
      wh = $.browser.version > "9.5" ? document.documentElement["clientHeight"] : wh;
   }

   $('#elementid').css("height", wh);
});

Answer 4

To resize the UI Tabs (latest 1.7.2 version, at least), it worked with the following code:

$ (document).ready (function () {
function resizeUi() {
    var h = $(window).height();
    var w = $(window).width();
    $("#tabs").css('height', h-95 );
    $(".ui-tabs-panel").css('height', h-140 );
};

var resizeTimer = null;
$(window).bind('resize', function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeUi, 100);
});
resizeUi();

}

Plus the flollowing css:

#tabs { 
    display: inline-block; 
    width:325px;

}

You wil have to edit some numbers according to you needs.