Tabs widget: heightStyle option not behaving as expected

[globalmatt]

See: http://jsbin.com/ofuhaw/259/edit

• With data-height-style="auto", all panels should be set to the height of the tallest panel (http://api.jqueryui.com/tabs/#option-heightStyle). In fact all panels seem to be set to a very short height, truncating the content.
• With data-height-style="fill", panels should "expand to the available height based on the tabs' parent height". I'm not entirely sure what that means, but what actually happens is that the panels seem to have zero height, which doesn't seem right.
• data-height-style="content" (the default) works as expected.

[MariagraziaAlastra]

Hello, I have made a little modification to your jsbin, take a look here.

On Google Chrome it looks ok now, so probably the faulty behaviour was due to the parent (the div with id "content"), which hadn't a specified height.

On Firefox, on the other hand, the first tab is blank, while the content of the other two is visible, but this is probably a browser issue.

[globalmatt]

@MariagraziaAlastra Are you proposing this as a workaround for the bug, or are you saying it's not a bug?

Adding a specified height to the parent container seems to fix the problem with data-height-style="fill", but not with data-height-style="auto" (I'm looking at it in Mac Safari 6.0.5). The panels are still not being set to the height of the tallest panel.

[MariagraziaAlastra]

Well, since with data-height-style="fill" the panels should "expand to the available height based on the tabs' parent height", this probably means that you must specify an height for the parent's container, otherwise jquery-mobile will assume that the parent's height is zero and set the panel's height to zero, too.
So yeah, it's probably not a bug.

[globalmatt]

With data-height-style="fill", I don't see why it would it assume that the parent's height is zero; I would expect it to read the parent's actual height.

Also data-height-style="auto" seems broken because the panels are not being set to the height of the tallest panel.

So I think there is at least one bug here. That, or a documentation issue.

[slavap]

There is a workaround/fix for data-height-style="auto", but it's not simple one :-(
First you need this library: https://github.com/dreamerslab/jquery.actual and include it to your project right after jQuery:

<script src="xxx_path/jquery.actual.js"></script>

Then you can define fixed version of _setupHeightStyle:

$.widget( "ui.tabs", $.ui.tabs, {
    _setupHeightStyle: function( heightStyle ) {
        if ( heightStyle === "auto" ) {
            var maxHeight = 0;
            this.panels.each(function() {
                maxHeight = Math.max( maxHeight, $( this ).height( "" ).actual( 'height' ) );
            }).height( maxHeight );
        } else {
            this._super();
        }
    }
});

And the same technique can be used to make data-height-style="fill" working properly:

$.widget( "ui.tabs", $.ui.tabs, {
    _setupHeightStyle: function( heightStyle ) {
        var maxHeight,
        parent = this.element.parent();

        if ( heightStyle === "auto" ) {
            maxHeight = 0;
            this.panels.each(function() {
                maxHeight = Math.max( maxHeight, $( this ).height( "" ).actual( 'height' ) );
            }).height( maxHeight );
        } else if ( heightStyle === "fill" ) {
            maxHeight = parent.actual( 'height' );
            maxHeight -= this.element.actual( 'outerHeight' ) - this.element.actual( 'height' );

            this.element.siblings( ":visible" ).each(function() {
                var elem = $( this ),
                    position = elem.css( "position" );

                if ( position === "absolute" || position === "fixed" ) {
                    return;
                }
                maxHeight -= elem.actual( 'outerHeight', { includeMargin : true } );
            });

            this.element.children().not( this.panels ).each(function() {
                maxHeight -= $( this ).actual( 'outerHeight', { includeMargin : true } );
            });

            this.panels.each(function() {
                $( this ).height( Math.max( 0, maxHeight -
                    $( this ).actual( 'innerHeight') + $( this ).actual( 'height') ) );
            })
            .css( "overflow", "auto" );
        } else {
            this._super();
        }
    }
});

[apsdehal]

Closing as tabs issue should be opened with ui.

[arschmitz]

this is a issue with mobile i believe it works properly in ui.