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

Twitter Bootstrap breaking Classic OOTB dialogs

  • September 2, 2016
  • 6 replies
  • 2574 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

    JoseBerciano
    JoseBercianoAuthor
    New Participant
    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.

    L
    leeaslingAccepted solution
    New Participant
    September 6, 2016

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

    #CQ * { box-sizing: content-box; }
      JoseBerciano
      JoseBercianoAuthor
      New Participant
      September 5, 2016

      OK thanks for your help Kautuk.

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

      kautuk_sahni
      kautuk_sahni
      Employee
      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
      New Participant
      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.

      smacdonald2008
      smacdonald2008
      New Participant
      September 2, 2016

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

      Terms & ConditionsAccessibility statement

      Loading footer...