Twitter Bootstrap breaking Classic OOTB dialogs

[JoseBerciano]

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? 

[smacdonald2008]

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

[JoseBerciano]

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.

[kautuk_sahni]

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

[JoseBerciano]

OK thanks for your help Kautuk.

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

[leeasling · Accepted solution]

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

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

[JoseBerciano]

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.