1

So I'm trying to use bootstrap styling (which is awesome BTW) on a custom SharePoint application page. To do this, I modified the bootstrap.less file to prefix all the selectors with an id that I chose. Basically, I followed the suggestion on this post: Prefixing all selectors for twitter bootstrap in less.

This worked great...the bootstrap styling was only being applied to a container div with the ID I had chosen. However, when I did this, I noticed modals stopped working. I tested this by switching back to the original bootstrap.css file..modals were working fine again. I can't use the default bootstrap.css file because it messes up some of the SharePoint styling on the rest of the page. What would I need to do to get modals working while using a custom prefixed selector on all the bootstrap styling elements?

Community
  • 1
  • 1
chatterjb
  • 91
  • 1
  • 7
  • Consider changing the order of the CSS file imports to give your older stylesheets more authority to exert themselves. Also make sure you compile your less css. – Bnjmn Nov 21 '12 at 17:06

1 Answers1

1

Figured it out. In the bootstrap-modal.js file, the callback for the backdrop property appends to the document body by default. Since I added a custom prefix to apply all the bootstrap styling, I had to change this to append to the parent div with that class. Fix shown below.

Original bootstrap-modal.js:

  this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .appendTo(document.body)

My fix (where my custom selector is '.bootstrap'):

  this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .appendTo($('.bootstrap')[0])
chatterjb
  • 91
  • 1
  • 7