[Off-canvas] - Opening 1 off-canvas causes the other off-canvas opening too

[ghost]

When you have multiple Off-canvas components at 1 page, and tries to open/close 1 of them, all the others are opening/closing.

https://jsfiddle.net/6Lwz76hv/

[colin-marshall]

@Silvester20 your syntax is messed up. You can only have one set of body tags. You want your page's main content to all be inside of the .off-canvas-content element. You also can only have one off-canvas menu per side. Your example uses two on the left.

Here is what your syntax should look like:
https://jsfiddle.net/qf4o4hdm/

[ghost]

@colin-marshall Thanks for the reply.

I just did a quick copy/paste from the docs so that's why the 2 body tags. Even when this is not valid W3 it doesn't matter so much for this example.

What you did is 1 off-canvas with 2 menu's inside it.
What I want is 2 off-canvas serperated; 1 off-canvas for a public chat and 1 off-canvas for a private chat in my webapplication.

So when I open the off-canvas related to the public chat, right now the off-canvas of the private chat is opening too. Here lies the bug(?).

[mrtpain]

I believe @colin-marshall has the correct solution though I'm not sure what you mean when you say you need 2 off-canvas separated.

What I would imagine you're asking for is an off canvas menu showing private chats and an off canvas menu showing public chats. Whichever is clicked, would reflect that data in the body content visible to the user. If this is the case, you'll need @colin-marshall's solution with a little more javascript manipulation on your part.

If this is still an outstanding issue, can you please provide some more details on what exactly you are trying to accomplish? This would help the community get a better understanding on how to correctly answer your question.

[ghost]

@mrtpain Thanks for the reply. This is still an issue in the latest version.

What I would imagine you're asking for is an off canvas menu showing private chats and an off canvas menu showing public chats. Whichever is clicked, would reflect that data in the body content visible to the user.

This is correct. However, you are talking here about 2 menu's

off canvas menu for public chat

off canvas menu for private chat

Want I mean is 2 off-canvas components (not menu's).

So 1 off-canvas component for public chat and 1 off canvas component for private chat at 1 page. The fiddle in my first post demonstrates exactly what I mean.

[colin-marshall]

@Silvester20 could you please provide us with a visual of what you are trying to accomplish? Just want to make sure I fully understand what you're trying to do. Thanks!

Also, what is the difference between an off-canvas component and a menu?

[colin-marshall]

One more thing, did you notice in my first response I said that there can only be one off-canvas area per side? If you are trying to make two different off-canvas areas slide out from the same side (the left in your example) it's not going to work. You would be better off having two buttons that trigger the same off-canvas area but have each button trigger a change in the content that is shown in the off-canvas area when it is clicked. I think that is basically what @mrtpain was suggesting and I agree with it.

[ghost]

what is the difference between an off-canvas component and a menu?

With "component" I mean a instance of the off-canvas, like
var component_1 = new Foundation.OffCanvas($('#offcanvas1'));
var component_2 = new Foundation.OffCanvas($('#offcanvas2'));

I appreciate the help but you guys still don't understand me, maybe it's because my English is not good enough haha :)

Imagine the following scenario: A admin can manage some account settings, like editing a password or editing the account details of registered users. These settings are divided into tabs using Foundation Tabs. And to make the settings responsive I decided to put the tabs inside a Foundation Off-canvas.

To manage the users I am using Foundation Reveal. But inside this reveal I am using a new Off-canvas to edit some user information. But when I am toggle this Offcanvas (in reveal), the first Off-canvas is toggled too!

Well, maybe this sounds a little bit confusing so a fiddle should help.
Also maybe @kball, @Owlbertz or @andycochran can take a look?

[mrtpain]

I'm pretty sure an off-canvas menu inside an active reveal is not possible/not the best UX decision. I get what you're thing to accomplish and still say, this is not possible without writing some additional JavaScript yourself.

[andycochran]

Off-canvas is not intended to be nested inside other components.

The docs explain how to have Multiple Menus, but that is poorly named. We should not use the word "menu" when talking about off-canvas. This should maybe say "Multiple Off-canvases" or "Multiple Off-canvas Panels." /cc @brettsmason (for his refactor of Off-canvas)

I'm going to close this, as it's not a bug.

[ghost]

as it's not a bug.

Sure it is. This is what Foundation code is saying right now using data-toggle="myCanvasId"

Hey, somebody passend an element id myCanvasId. Actually I have to use this myCanvasId but screw it, I will search the whole page for any off-Canvas component and affect them all instead the given one only.

I have fixed this bug by meself anyway

[colin-marshall]

@ghost it is not a bug because what you are trying to accomplish is not currently how off-canvas was intended to be used.

As @andycochran mentioned, @brettsmason is refactoring off-canvas for v6.3 and this might be something you could accomplish with it, but he would have to speak on that.

[brettsmason]

@ghost I'd like to see if I can help with this. As has been said I have reworked off canvas and I think it's now a lot more flexible. I don't fully understand your issue yet, but I'll try and take a look at your demo and see it can be done in the new version.

[brettsmason]

@ghost @colin-marshall @andycochran turns out this is pretty easy in the new version (assuming I understood your demo).
Take a look here: http://brettmason.co.uk/offcanvas/9093/
It's not exactly right, but should give you an idea that the off canvas panels should work how you want them to.

[colin-marshall]

@brettsmason that is sweet! Nice work!