CODEWITHSUNDEEP
javascriptjqueryhtmlzurb-foundationaccordion
Bill Wareham
Bill Wareham

Reputation: 61

Foundation 6 accordion active item creates page layout error

I'm using a Foundation 6 accordion as a central element on a page, and I'd like it to load with the first accordion item open, which is possible with the "is-active" state class. But on the initial load, the open item pushes the rest of the accordion over my footer, which remains stationary. You can see what I mean on this test page. The same thing happens when I use one of the accordion deep links in the right sidebar. The footer moves to its correct position if you resize the browser or click on another accordion item. I've tried placing scripts in different places in the body to change when the active item loads, but nothing seems to work.

Upvotes: 0

Views: 266

Answers (2)

Bill Wareham
Bill Wareham

Reputation: 61

I discovered that the data-equalizer on that row was apparently fixing the height of the column with the accordion prior to activating the accordion pane. When I removed the data-equalizer-watch from that column everything rendered properly.

Upvotes: 0

Austin Jones
Austin Jones

Reputation: 709

set the accordions parent height to auto

height:auto

whats happening is with the fixed height the accordion overflows its parent. So for example on the sample link you gave the parent would be the div with the class large-6 columns

.large-6 columns {height:auto;}

fixed the problem

Upvotes: 0

Related Questions