0

Just installed pace.js and paceThemeRound.css (centre radar theme) and I get a weird shape as image below. The problem is due to the fact that the script is conflicting with bootstrap.min.css. If I remove it from my website it is working fine.

https://jsfiddle.net/6pkq5egd/

Apache tiles configuration

    <put-list-attribute name="stylesheets_top">
        <add-attribute value="/static/public/css/bootstrap.min.css" />          
        <add-attribute value="/static/protected/css/global.css" />
        <add-attribute value="/static/protected/css/header.css" />
        <add-attribute value="/static/protected/css/footer.css" />
        <add-attribute value="/static/protected/css/paceThemeRound.css" />
    </put-list-attribute>

Any idea on how to fix it?

enter image description here

QGA
  • 3,114
  • 7
  • 39
  • 62
  • what code do you use, and what have you tried to fix it? – Rene Pot May 13 '15 at 15:42
  • I am trying to post the code but it keeps telling me that my post is mostly code. BTW I tried to remove all css in my page to avoid any conflicts. – QGA May 13 '15 at 15:45
  • That is only CSS. Try making a JSFiddle that illustrates the problem – Rene Pot May 13 '15 at 16:54
  • I found the problem. I pulled out bootstrap.min.css from my project and now it works fine. Why is it conflicting with Bootstrap v 3.2.2? – QGA May 13 '15 at 17:13
  • @RenePot https://jsfiddle.net/6pkq5egd/ – QGA May 27 '15 at 10:37

1 Answers1

1

Apparently it is a bug,

Since center radar theme assumes that box-sizing property is set to content-box, the layout is a little bit broken when that property is set to border-box (especially with twitter bootstrap). I explicitly added box-sizing: content-box and now it works.

Hope this can be of help

QGA
  • 3,114
  • 7
  • 39
  • 62