< Return to Feed
Sean McKaharay - 07.13.2015

Bugs With Bootstrap and Sitecore 8

If you are the type of developer that builds for Experience Editor first and you are implementing a Twitter Bootstrap solution you will know that there are some CSS conflicts and issues in the Experience Editor. These issues don't change the functionality, but they are annoying and create a bad user experience.

In Sitecore 8, The Experience Editor ribbon is now inserted into the page rather then being in an iframe like in earlier versions of sitecore. So that means that there are javascript conflicts (talked about in another blog) and stylesheet issues if you should use css frameworks like Bootstrap.

1) The +Add here button in admin is cut off

Should Look like

2) The navigation bar doesn't show hover very well

Should Look like


3) The command buttons on admin don't have correct hover state

Should Look like



The solution

Until sitecore adds new css to their build there are some lines of css we can add to your css. If you add to sitecore's css, then on the next upgrade you will have to either check to see if they fixed and if they didn't then you will have to add back to css. Another way of doing it is create a new css file and add it to page when in Page Edit mode. Below is the css you need to make sure adds to the page:


/* Added to fix add this in Sitecore Admin */
.scInsertionHandleCenter 
{
  box-sizing: content-box !important;
  -webkit-box-sizing: content-box !important; 
  -moz-box-sizing: content-box !important; 
 }
 
.scInsertionHandleCenter, .sc-breadcrumb .sc-breadcrumb-item-path, 
.sc-breadcrumb-item-path img, .scChromeCommand

{
  -webkit-box-sizing: initial;
  -moz-box-sizing: initial;
  box-sizing: initial;
}
.sc-breadcrumb-item-path img
{
  vertical-align: initial;
}
.sc-breadcrumb-item-path span
{
    font-size: 12px; 
}