Menu icon Foundation
Foundation 6, Modals rendering at bottom of page

Having an issue using angular1 and foundation6. Foundation 6 is rendering modals at the bottom of the page, moving them outside of my containers that have my angular controllers appended to them.

Anyone encountered this issue, have a solution / work around?

foundation6angularangular1angular 1foundation 6modalmodals

Having an issue using angular1 and foundation6. Foundation 6 is rendering modals at the bottom of the page, moving them outside of my containers that have my angular controllers appended to them.

Anyone encountered this issue, have a solution / work around?

Daniel about 3 years ago

The reveal modal initialization moves the actual modal html to the end of the body tag (you can witness this in a number of modal examples). Not sure why that would be causing it to appear down there though, as the initialization also hides it from sight.

Could there be a problem with some css styling not allowing it to be hidden? Or maybe you're isolating the Foundation framework to a specific portion of the body? (and therefore not extending to the end of the body tag)

Also, is your controller being attached inside the modal div? I haven't played around with angular1 to know how if there would be a problem moving dom elements after attaching a controller.

Todd almost 3 years ago

Hey Luke I had a similar problem and realised that I didn't include the foundation-reveal classes into my main scss file.

Added:

@include foundation-reveal;

Into foundation.scss and it all worked fine.

 

Not sure if my implementation is the same as yours but that's a good place to start.