Action Sheets break inside Menu Bars

[Joe-5mith]

There are two issues here:

1. The action sheet flashes onto the screen and disappears quickly when the toggle link is pushed ("Menu Link 1" in the the example code below).
2. The action sheet causes the menu container (the menu-group div in the example code below) to scroll and the action sheet gets hidden inside that container.

Here is some example code:

<div class="menu-group primary">
            <div class="menu-group-left">
                <ul class="menu-bar">
                    <li><a href="#"><strong>Sometext</strong></a></li>
                </ul>
            </div>
            <div class="menu-group-right">
                <ul class="menu-bar">
                    <li>
                        <a href="#" zf-toggle="my-actionsheet">Menu Link 1</a>
                        <zf-action-sheet id="my-actionsheet">
<!--                            <zf-as-button>my button goes here</zf-as-button>-->
                            <zf-as-content position="bottom">
                                My content goes here
                            </zf-as-content>
                        </zf-action-sheet>
                    </li>
                </ul>
            </div>
        </div>

See also: #496 and: http://foundation.zurb.com/forum/posts/21216-foundation-for-apps-action-sheets-in-nav.

[gakimball]

Here are the problems:

• The menu bar is hiding overflowing content. We can fix that with overflow-y: hidden, and it shouldn't break anything else.
• The action sheet container isn't centered within the menu bar item. It's anchored to the right instead, like a normal element would be. You can fix that with position: relative; left: 50%;. I'm not sure how to elegantly build that fix into the framework.

Applying those fixes will make the action sheet visible.

However, since it's anchored so far to the right it will be cut off, which is a known issue. We need to add some kind of edge detection to the action sheet. (Or rethink it entirely at some point, because it's a super unwieldy component right now, and probably overlaps in functionality with the popup.)

[Joe-5mith]

Setting overflow-y: hidden on the .menu-bar class and position: relative; left: 50%; on the .action-sheet-container class did not work for me.

The following has worked (written in SASS):

.menu-bar {
    overflow-x: visible;
    .action-sheet-container {
        display: block;
    }
}

[phiychai]

I have tried this but it doesnt work me also. Anyone have any idea what to do?

[Joe-5mith]

@bbcreatv, did you try using the SASS I wrote out in my previous comment above? That SASS has worked for me so far.

[phiychai]

I actually figured it after. I had to set overflow-x and y visible on my grid-block as well as the menu :)

[lucafabbri]

Hi,

Sass above works well. I've figured out that using an icon within the anchor makes toggle trigger twice, so that action sheet open and close immediatelly.