Search code examples
javascriptpanel

'autoposition' attribute not being applied between JsPanels

I'm starting to use JsPanel in a project at work and I have some doubts on why the 'autoposition' is not being applied between some panels.

I have 4 panels: A, B, C and D.

A panel:

jsPanel.create({
    id:          'A',
    theme:       'primary',
    headerTitle: 'A panel',
    position:    { my: 'left-top',
                   at: 'left-top',
                   offsetX: '0px',
                   offsetY: '0px',
                   autoposition: 'down'
                 },
    contentSize: '450 250',
    content:     '<p> Test test test</p>',
    callback: function () {
        this.content.style.padding = '20px';
    },
    onbeforeclose: function () {
        return confirm('Are you sure?');
    }
});

B panel:

jsPanel.create({
    id:          'B',
    theme:       'primary',
    headerTitle: 'B panel',
    position:    { my: 'center-top',
                   at: 'center-top',
                   offsetX: '0px',
                   offsetY: '0px',
                   autoposition: 'down'
                 },
    contentSize: '450 250',
    content:     '<p> Test test test</p>',
    callback: function () {
        this.content.style.padding = '20px';
    },
    onbeforeclose: function () {
        return confirm('Are you sure?');
    }
});

C panel:

jsPanel.create({
    id:          'C',
    theme:       'primary',
    headerTitle: 'C panel',
    position:    { my: 'right-top',
                   at: 'right-top',
                   offsetX: '0px',
                   offsetY: '0px',
                   autoposition: 'down'
                 },
    contentSize: '450 250',
    content:     '<p> Test test test</p>',
    callback: function () {
        this.content.style.padding = '20px';
    },
    onbeforeclose: function () {
        return confirm('Are you sure?');
    }
});

D panel:

jsPanel.create({
    id:          'D',
    theme:       'primary',
    headerTitle: 'D panel',
    position:    { my: 'left-top',
                   at: 'left-bottom',
                   of: '#A',
                   autoposition: 'up'
                 },
    contentSize: '450 250',
    content:     '<p>Test test test</p>',
    callback: function () {
        this.content.style.padding = '20px';
    },
    onbeforeclose: function () {
        return confirm('Are you sure?');
    }
});

Reading the documentation of the 'position' option, specifically the 'autoposition' attribute, says that you can set a value to add a gap between panels to prevent them from piling up on each other:

'down' for panels positioned using either 'left-top', 'center-top' or 'right-top' for both my: and at: setting autoposition to 'down' will automatically add a vertical offset downwards to each elmt in order to prevent them from piling up on each other. Removing a jsPanel will automatically reposition the remaining panel in the same stack.

'up' for panels positioned using either 'left-bottom', 'center-bottom' or 'right-bottom' for both my: and at: setting autoposition to 'up' will automatically add a vertical offset upwards to each elmt in order to prevent them from piling up on each other. Removing a jsPanel will automatically reposition the remaining panel in the same stack.

but for me it's not being applied. I've tried to remove the autoposition in A or D but no result.

Panels

So what am I doing wrong or what have I misunderstood?

Regards.

-- Edit 1:

I have achieved the separation adding:

offsetY: '8px',

to panel D but I think that this is not the correct solution...

Solution

  • I have found the problem. It was a misunderstanding with positions. Seeing example number 5 that adds panels one below the other the positions are:

    my: 'right-top',
at: 'right-top',

    and then you set:

    autoposition: 'down',

    So in panel D I had to change:

    position:    { my: 'left-top',
               at: 'left-bottom',
               of: '#A',
               autoposition: 'up'
             },

    to

    position:    { my: 'left-top',
               at: 'left-top',
               of: '#A',
               autoposition: 'down',
               offsetY: 4px
             },

    The offsetY is optional. By default JsPanel adds a 4px separation but if you look on the image, the horizontal separation is 4px + 4px so I add 4 extra pixels to match visually the horizontal separation with the vertically separation.

    Regards!