Foundation Breaks Design Dialogs

Problem: The popular css library Foundation causes conflicts with some of the author mode dialog widgets.

Here is an example of the broken checkboxes in a parsys design dialog after foundation.css is loaded:

design_dialog_foundation_fubar

Solution: Add a one-line css rule to fix it.

Within your project’s etc/design css files, add the following:

#CQ label
{
display: inline;
}

After a page refresh, the formerly-broken dialog will be back to normal:

design_dialog_foundation_fixed

Summary: Libraries like Zurb Foundation are great for CQ projects, but can cause minor issues with the the automatic author controls that AEM injects into pages. Most of these can be fixed with some quick CSS hacks.

Leave a Reply

Your email address will not be published. Required fields are marked *