Question

I am using this jQuery plugin in my app http://www.building58.com/examples/tabSlideOut.html

It all works well except that the height of my slide out panel is not fixed – it uses an Ajax request to populate a list of items which could be of any length – a drop down at the top allows this list to be filtered by status so the height will change.

I can add a height to the CSS which works but as it could be any height this doesn’t really solve the problem but because the list is populated dynamically, when I leave the height out of the CSS it sees no content and displays too small.

Is there a way to resize the panel when the content changes?

Answer 1

In case anyone else has this problem I solved it by modifying the JavaScript slightly – the dimensions were only being checked the first time which is why it did not resize.

I made this change so it would create a new object each time

var properties = function(){
    return {
        containerWidth: parseInt(obj.outerWidth(), 10) + ‘px’,
        containerHeight: parseInt(obj.outerHeight(), 10) + ‘px’,
        tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + ‘px’, 
        tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + ‘px’
    }
};

I then updated all references from

properties.attribute

to

properties().attribute

And now the height adjusts whenever the content is updated.