Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Twitter Bootstrap breaking Classic OOTB dialogs

Avatar

Level 3

I would like to integrate Twitter Bootstrap (latest version 3.3.6) in my website, though when adding the bootstrap css it seems to be breaking the dialogs layout of the page and also the components.

I tried both adding it as a clientLib and as a dependency to my clientlibsAll, same result either way.

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:ClientLibraryFolder" categories="[clientlibs-all]" dependencies="[cq.widgets,jquery,cq.social.bootstrap.3]"/>

Any suggestions? 

1 Accepted Solution

Avatar

Correct answer by
Level 8

In your CSS, place the following override.  This will fix the dialog styling.

#CQ * { box-sizing: content-box; }

View solution in original post

6 Replies

Avatar

Level 10

I am checking within Adobe if anyone has seen this issue before. 

Avatar

Level 3

Hi Scott, any luck with that?

I would not mind to use a previous version of Bootstrap either, though I already tested with version 2.2.1 and same result: dialogs CSS layout is broken always.

Cheers.

Avatar

Administrator

Hi Jose

I've seen this some time whenever a CSS framework of some sort is used regardless of AEM version.

You can go fancy and have a logic that excludes the bootstrap.css when dialog are opening, however the cleaner approach would be to override the CSS selector that's causing the issue. 

I would request you to create a Support ticket to debug this. Once case is solved, please do post solution here for communities benefit.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 3

OK thanks for your help Kautuk.

I will let you know as soon as I get the issue solved.

Avatar

Correct answer by
Level 8

In your CSS, place the following override.  This will fix the dialog styling.

#CQ * { box-sizing: content-box; }

Avatar

Level 3

That helped a lot Lee, thanks so much.

It did not fix everything though, I had to override some more CSS:

 

#CQ * { box-sizing: content-box; } legend { width: auto !important; -webkit-padding-start: 2px; -webkit-padding-end: 2px; border-style: none; }

 

It seems to be fixed now.