second line in toolbar mode

[njordr]

Hi. How could I create a second line in jsPanel toolbar mode? I want to create a little status panel, with one line made of bigger icons and the second with smaller icons related to the ones on the first line:

--------------------------
|bigger |bigger |bigger |
|s1s2s3 |s1s2s3 |s1s2s3 |
--------------------------

I try with a simple
or with a "complex" grid (I'm using foundation css), but it always breaks everything. Thanks

[Flyer53]

Let me try a few things ... I'll get back to you ...

[Flyer53]

Just created an example on Codepen which I think is pretty much what you want. I used CSS flexbox because it's independant from any framework.

http://codepen.io/Flyer53/pen/ggYgXQ

option.headerToolbar is only used to add the toolbar HTML. Handlers for the items in the toolbar have to be added manually.

Take a look and tell me what you think ...

[njordr]

That's exactly what I want to achieve, but when I try I've got this ugly result :(

Attached my js, my css and my svg images

status_panel.zip

[Flyer53]

The missing piece of information was that you append your toolbar to the content section, not to the header toolbar section. So you just need to set the css display property of the content section .jsPanel-content to flex. (Or you wrap the toolbar elements in an extra div and set the div's display property to flex.)

var yPos = $(window).height() - 350;
var statusPanel = $.jsPanel({
    id: "statusPanel",
    contentSize:     { width:  500, height: 285 },
    position: { left: 0, top: yPos },
    resizeit:       false,
    resizable: 'disabled',
    theme:    'darkseagreen',
    headerRemove: true,
    content: status_icons,
    callback: function () {
        this.css({background: "transparent", boxShadow: "none"})
            .content.css({background: "transparent", display: "flex"})
                    .addClass('horizontal-toolbar');
    }
});

A word on the resizing options: If you load jquery ui including the resizable interaction it's enough to set resizable to "disabled". No need to set resizeit to false because it won't be used anyhow.

[njordr]

You're a f**** genius :)

Thanks, it works and it's really nice!