Skip to main content
JoseBerciano
JoseBerciano
Level 3
Sep 2, 2016 11:54 AM UTC
Solved

Twitter Bootstrap breaking Classic OOTB dialogs

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? 

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    leeaslingAccepted solution
    Level 8
    Sep 6, 2016 7:01 PM UTC

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

    #CQ * { box-sizing: content-box; }
    View in thread

    6 replies

    smacdonald2008
    smacdonald2008
    Level 10
    Sep 2, 2016 3:38 PM UTC

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

    Translate
    JoseBerciano
    JoseBercianoAuthor
    Level 3
    Sep 3, 2016 1:09 PM UTC

    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.

    Translate
    kautuk_sahni
    kautuk_sahni
    Level 9
    Sep 5, 2016 5:31 AM UTC

    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

    Translate
    Kautuk Sahni
    JoseBerciano
    JoseBercianoAuthor
    Level 3
    Sep 5, 2016 6:36 AM UTC

    OK thanks for your help Kautuk.

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

    Translate
    leeaslingAccepted solution
    Level 8
    Sep 6, 2016 7:01 PM UTC

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

    #CQ * { box-sizing: content-box; }
    Translate
      JoseBerciano
      JoseBercianoAuthor
      Level 3
      Sep 9, 2016 8:53 AM UTC

      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.

      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...