Resizeable maxHeight and maxWidth

[mehmetalidumlu]

Hi, I set maxHeight and max Width likely that:

...
resizeable:{
                maxWidth: function () { return $(window).width() - 20 },
                maxHeight: function () { return $(window).height() - 20 }
            },
...

But when content load , panel is overflow screen. Can you help me about this?

[Flyer53]

Hi there, The config object you pass to option.resizable is directly passed to jquery ui's resizable interaction and is applicable only when you resize the panel with the mouse. See http://api.jqueryui.com/resizable/ But that's probably not what you want. Tell me more about your intentions and I might be able to help you some more.

[mehmetalidumlu]

Thank you for your interest. I get data from partial page and set jsPanel's content. Screen height is 450px but jspanel height is 1000px. i run jsPanel.reposition('center'). content doesnt show scroll an i cant see jsPanel header.

An other problem is jsPanel.resize('auto','auto') :) It cant set width truly

ScreenShot

[Flyer53]

Ok, I understand you create a jsPanel, load some data, and then you want the panel to fill the entire screen. Correct? I would suggest the following approach:

• create a centered panel without using option.contentSize and option.position
• load your data (do you use option.content or option.contentAjax?)
• maximize panel with callback so it fills the whole screen

Example using ajax to load data:

$.jsPanel({
    contentOverflow: { horizontal: 'hidden', vertical: 'scroll' },
    contentAjax: {
        url: 'http://url/to/your/resource',
        done: function( data, textStatus, jqXHR, panel ) {
            // use done callback to first append the data
            panel.content.append(data);
            // and then maximize the panel -> fills the whole screen without overflowing
            panel.maximize();
        }
    }
});

Similar but using option.content

$.jsPanel({
    contentOverflow: { horizontal: 'hidden', vertical: 'scroll' },
    content: ' your content ',
    callback: function () {
        this.maximize();
    }
});

Hope this helps. Let me know if you have more questions ....

[mehmetalidumlu]

I get data from other ajaxRequest. I set contentOverflow for vertical scroll and run but not working. But when maximize jsPanel then all items work truly.

[Flyer53]

option.contentOverflow sets the overflow property only for the div element of the panel that takes the content, but not of the content itself. Maybe you need to alter the css of your content?

[mehmetalidumlu]

I am doing a great work , thanks to you. I use contentAjax and get truly content width. This time height not truly :( There is screenshot.

ScreenShot

Your plugin rescue me :)

[Flyer53]

Thank you very much :) Well, it would be helpful if you could provide the code you use to create the panel. And I need more detail about what you want the panel to be like. The screenshot shows the panel, but I can't see what's wrong unless you tell me. Why is the height not correct and what should the height be?

[mehmetalidumlu]

There is code block for jsPanel:

$.jsPanel({
    id: "controlsModal",
    contentAjax: {
        type: 'POST',
        url: url,
        data: { TableName: TableName, ID: ID, GeometryWKT: undefined },
        autoload: true,
        done: function () {
            this.content.mCustomScrollbar({
                theme: 'dark',
                scrollButtons: { enable: true }
            });
            this.resize("auto", "auto").reposition();
        }
    },        
    contentOverflow: { horizontal: 'hidden', vertical: 'hidden' },
    headerTitle: TableAlias,
    draggable: {
        handle: "div.jsPanel-hdr .jsPanel-title, div.jsPanel-content",
        stack: ".jsPanel",
        opacity: 0.8
    },
    onclosed: function () {
        CancelDraw();
        vectorLayer.getSource().clear();
    },
    show: "jsPanelFadeIn",
    theme: "primary"
});

Partial page has not any height. I use bootstrap grid system on page. jsPanel set width truly but height cant set truly. Partial pages height 600px but jsPanel view page with standard height, for example 150px and show scrool. But screen height is 1080 px :/

[Flyer53]

Where you call the resize method in the done callback please replace

this.resize("auto", "auto").reposition();

with

this.resize({width: "auto", height: "auto"}).reposition();

and tell me whether it makes a difference.

[mehmetalidumlu]

I use this option. This time jsPanel is smaller than previous jsPanel :/ I dont want set static height because it isnt useful then.

[Flyer53]

Does that mean that height is ok now???

Concerning width: Using "auto" for the width might work in some cases, in others not. Why: Because you never really know how a browser calculates the width to use. And different browsers might produce different results and might not even come close to the result you expect. Where will the browser insert a linebreak for example.

So I suggest that you use a reasonable fixed width that suits your needs. Or you could use "auto" for the with and additionally set min and max values for the width within the resize method to make sure width remains in a certain range. For example let's assume your panel would result in a width of about 800px. Then you could resize like:

this.resize({width: "auto", height: "auto", minwidth: 775, maxwidth: 825}).reposition();

[mehmetalidumlu]

:/ jsPanel open default values. I use this: this.resize({ width: "auto", height: "auto", minheight:700, maxheight: $(window).height() }).reposition();

It not works...

[Flyer53]

My example was about minwidth and maxwidth, not height!!

[Flyer53]

Are you somehow able to create a live page with an example I can take a look at? That might help me a lot!

[mehmetalidumlu]

I search jsPanel js file in cdnjs but not found so I cant prepare an example in jsfiddle. But when i use "this.resize({ width: 'auto', height: 'auto', minheight: 500, callback: function () { this.reposition(); } })" or "this.resize({ width: 'auto', height: 'auto', minheight: 500}).reposition();" then jsPanel use defaults values :/ Note: I test examples on this page: http://jspanel.de/api/#method/resize. Its not works none of them on . But when i use "this.resize( "auto","auto").reposition()" it set width truly :/ I prepare an example at the earliest.

[Flyer53]

You're wright, jsPanel is not on cdnjs yet. I saw you filed a request ... thanks :)

Did you check whether there is any css in the content you load via ajax affecting width/height of the content and thus width/height of the panel when using "auto"? Did you upgrade to jsPanel version 3.1.x? The resize method prior version 3.1 doesn't support an object as parameter. On what browsers do you test? Anything less than IE11 won't work!

I would appreciate it very much if you could set up a demo page I can check out. That would make things a lot clearer I guess ...

[mehmetalidumlu]

I will prepare an example on my server. I will send a link and project soon.

[mehmetalidumlu]

There is an online example link which You can analyse it: http://212.156.70.230/JSPANEL And here project link: https://yadi.sk/d/wul5_sIDtjMnu Project need Microsoft.Web.Infrastructure. If you need download it use this nuget install string: Install-Package Microsoft.AspNet.Web.Optimization

[mehmetalidumlu]

I comment resize commands in example :)

[Flyer53]

Ok, I just checked your first link and noticed that you use jsPanel version 3.0.1 which does NOT support an object as argument in the resize method. And you do need the object in order to use minwidth, maxwidth and so on. resize("auto", "auto") does not handle the the "auto" values the same way resize( { width: "auto", height: "auto" } ) does!

You definitely have to upgrade to the latest jsPanel version 3.1.1

Pleas upgrade first, try again, and then let's see what happens....

[Flyer53]

I just changed example 2 on the contentAjax documentation page to include the resize method. Take a look how the panel is resized and repositioned in the always callback

http://jspanel.de/api/#option/contentAjax

[mehmetalidumlu]

Thank you! :) I do it at last with your help :) I use your plugin in my web projects, thank you again...

[Flyer53]

:) Always welcome ... take care ...