jQuery UI portlets

Question

I am trying to make panels which are draggable, resizable, collapsible, closable and can be maximised and minimized as well as follows.

I also want a scroll for the portlet content, if resizing overflows the content. When I set overflow:auto the scroll comes even if the content is not overflowing.

.portlet {
    position: absolute;
    overflow:auto !important;
}

you can have look over my code and demo here panel code
Any help will be appreciated. Thanks in advance!!

Answer 1

The thing that is causing the scrollbars in your jsFiddle is the ui-resizable-handle elements.

Adding these CSS statements should remove the scrollbars until they are needed and doesn't seem to affect the drag handle's functionality

.ui-resizable-s { bottom: 0 !important }
.ui-resizable-e { right: 0 !important }

Here is an updated jsFiddle

As an aside. Although they seem to behave better if you remove the jquery stylesheet link you had in the jsFiddle HTML area, removing it alters their starting positions. So I've left it in with the expectation that it works correctly for you in your actual code.

Answer 2

I dug around and found this Tutorial-Create a Windows-like Interface with jQuery UI

here is the jsFiddle and the code-

  var _init = $.ui.dialog.prototype._init;
    $.ui.dialog.prototype._init = function() {
        _init.apply(this, arguments);

        var dialog_element = this;
        var dialog_id = this.uiDialogTitlebar.next().attr('id');

        this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id + 
        '-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">'+
        '<span class="ui-icon ui-icon-minusthick"></span></a>');

        $('#dialog_window_minimized_container').append(
            '<div class="dialog_window_minimized ui-widget ui-state-default ui-corner-all" id="' + 
            dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() + 
            '<span class="ui-icon ui-icon-newwin"></div>');

        $('#' + dialog_id + '-minbutton').hover(function() {
            $(this).addClass('ui-state-hover');
        }, function() {
            $(this).removeClass('ui-state-hover');
        }).click(function() {
            dialog_element.close();
            $('#' + dialog_id + '_minimized').show();
        });

        $('#' + dialog_id + '_minimized').click(function() {
            $(this).hide();
            dialog_element.open();
        });
    };

        $(document).ready(function() {
            $('#create_button').button().click(function() {
                var create_dialog = $('#dialog_window_1');
                var create_button = $(this);
                if( create_dialog.dialog('isOpen') ) {
                    create_button.button('option', 'label', 'Create a new Window');
                    create_dialog.dialog('close');
                } else {
                    create_button.button('option', 'label', 'Close Window');
                    create_dialog.dialog('open');
                }
            });

            $('#dialog_window_1').dialog({
                width: 'auto',
                height: 'auto',
                autoOpen : false,
                buttons: [
                    {
                        text: 'Create',
                        click: function() {
                            var div_count = $('.dialog_window').length + 1;
                            var div_id = 'dialog_window_' + div_count;
                            var div_title = $('#new_window_title').val();
                            var div_content = $('#new_window_content').val();
                            var buttons = new Array();
                            if( $('#alertbutton').is(':checked') ) {
                                buttons.push({
                                    text: 'ALERT',
                                    click: function() {
                                        alert('ALERTING from Dialog Widnow: ' + div_title);
                                    }
                                });
                            }

                            if( $('#closebutton').is(':checked') ) {
                                buttons.push({
                                    text: 'CLOSE',
                                    click: function() {
                                        $('#' + div_id).dialog('close');
                                    }
                                });
                            }

                            $('body').append('<div class="dialog_window" id="' + div_id + '">' + div_content + '</div>');

                            var dialog = $('#' + div_id).dialog({
                                width: 'auto',
                                height: 'auto',
                                title : div_title,
                                autoOpen : true,
                                buttons: buttons
                            });
                        }
                    }
                ]
            });
            $('#buttonlist').buttonset();
        });`

Answer 3

Change your css code to the following.

.portlet {
    position: absolute;
}
.portlet-content {
    overflow:auto !important;
}