Twitter Bootstrap breaking Classic OOTB dialogs | Community
Skip to main content
JoseBerciano
JoseBerciano
Level 3
September 2, 2016
Solved

Twitter Bootstrap breaking Classic OOTB dialogs

  • September 2, 2016
  • 6 replies
  • 2577 views

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.
    Best answer by leeasling

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

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

    6 replies

    smacdonald2008
    smacdonald2008
    Level 10
    September 2, 2016

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

    JoseBerciano
    JoseBercianoAuthor
    Level 3
    September 3, 2016

    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
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    September 5, 2016

    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
    JoseBerciano
    JoseBercianoAuthor
    Level 3
    September 5, 2016

    OK thanks for your help Kautuk.

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

    L
    leeaslingAccepted solution
    Level 8
    September 6, 2016

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

    #CQ * { box-sizing: content-box; }
      JoseBerciano
      JoseBercianoAuthor
      Level 3
      September 9, 2016

      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.

      Terms & ConditionsAccessibility statement

      Loading footer...