search

zurb / foundation-apps

The first front-end framework created for developing fully responsive web apps.
http://foundation.zurb.com/apps
MIT License
1.58k stars 216 forks source link

nested divs within panels disable close link #793

Open rachelreveley opened 8 years ago

rachelreveley commented 8 years ago

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 commented 8 years ago

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.