In my last blog post I discussed how to implement form submission so that even Internet Explorer 9 (IE9) would work. This time I’ll discuss accordions.
Using libraries such as Bootstrap is fairly routine when working on web applications. Bootstrap is one of the most common libraries. It implements several basic and useful components, such as dropdowns, progress bars, panels, and accordions. The original Twitter Bootstrap has been extended by AngularJS, and this extended version contains even more components, which are actually AngularJS directives that wrap Bootstrap components.
Because both of these libraries are useful, it’s a fairly common mistake to include both in your project. It doesn’t seem to cause any problems either – until you try to expand an accordion in IE9.
The accordion won’t open at all in IE9, even if you try to manually apply the correct classes to it. No errors show up, so it’s an incredibly frustrating issue to encounter. It turns out both libraries are implementing the collapse functionality. The libraries’ implementations conflict in IE9, so they effectively cancel out and you cannot expand or collapse your accordions.
Here’s the workaround: remove your dependency on Bootstrap. Angular Bootstrap gives you everything you need, so you don’t need both. If you’re depending on styling from Bootstrap however, you can include just the Sass files.
Stay tuned for more Internet Explorer quirks.
Resources/Further Reading:
Contact Us
Ready to achieve your vision? We're here to help.
We'd love to start a conversation. Fill out the form and we'll connect you with the right person.
Searching for a new career?
View job openings
