Open side by side

[leandrocombr]

Hello,

How do I open side by side like it is done in GMAIL

https://ibb.co/nnd4nsh

There must be a way?

[Flyer53]

@leandrocombr
Would you please describe your intentions a bit more detailed.

In case you just want to place the panels next to each other you can do that with the regular option.position.

In case you want the panels to be "attached" to each other, so that they are dragged together for example, then you might want to take a look at the dock extension.

[leandrocombr]

Hello @Flyer53

I will give an example

I click on the website menu, where it calls the openpanel function passing the url

function openpanel(urlajax){
   jsPanel.create({
      contentAjax: urlajax,
      position: 'right-bottom',
   });
}

However, because there are multiple panels, I have no control over the position of the last panel, to open side by side.

[Flyer53]

You somehow have to keep track of your open panels in order to position a new panel relative to an existing panel.

Simple example of how to position a panel relative to another panel:

var one = jsPanel.create({
  position: 'right-bottom'
});

var two = jsPanel.create({
  position: {
    my: 'right-top',
    at: 'left-top',
    of: one,
    offsetX: -5
  }
});

[Flyer53]

Another method which is a lot easier:
Create a container at the bottom right of the browser window with the following css

.testbox {
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  bottom: 0;
  right: 0;
  border: 5px solid red; /* just for visualization */
  height: auto;
  width: auto;
}

And then append the panels to this container like

jsPanel.create({
  container: '.testbox',
  position: false,
}).style.position = 'relative';

It's important that option.position of the individual panel is set to false and that you set the css property position of the panel to relative. Then the panels automatically align in the container from right to left and even reposition automatically whenever one of the panels is closed.

This is a very simple example that seems to work quite well, but surely needs some refinement.

Hope that helps ...

[Flyer53]

You can find a simple working demo at https://jspanel.de/docs/demos/test-panels-in-flexbox.html