nested divs within panels disable close link

[rachelreveley]

2 levels of divs within a panel disables the close link within the panel.

This works

            <div zf-panel="" id="help" position="bottom">
                <a zf-close="" class="close-button">×</a>
                <div class="grid-block">
                        <h3>Get help</h3>
                </div>
            </div>

So does this

            <div zf-panel="" id="help" position="bottom">
                <a zf-close="" class="close-button">×</a>
                <div class="grid-content">
                        <h3>Get help</h3>
                </div>
            </div>

But not this

            <div zf-panel="" id="help" position="bottom">
                <a zf-close="" class="close-button">×</a>
                <div class="grid-block">
                    <div class="grid-content">
                        <h3>Get help</h3>
                    </div>
                </div>
            </div>

The close link becomes greyed out and inactive.

[rachelreveley]

This also works

            <div zf-panel="" id="help" position="bottom">
                <a zf-close="" class="close-button">×</a>
                <div>
                    <div class="grid-content">
                        <h3>Get help</h3>
                    </div>
                </div>
            </div>

But not this

            <div zf-panel="" id="help" position="bottom">
                <a zf-close="" class="close-button">×</a>
                <div>
                    <div class="grid-block">
                        <div class="grid-content">
                            <h3>Get help</h3>
                        </div>
                    </div>
                </div>
            </div>

My conclusion is that it only breaks when there are 2 levels of nested divs with classes. Unfortunately you need 2 levels for the grid to work.