search

malsup / blockui

jQuery BlockUI Plugin
http://jquery.malsup.com/block/
1.69k stars 506 forks source link

Twitter Bootstrap 3.0 interferes with CSS applied to BlockUI #84

Closed magicsoft714 closed 11 years ago

magicsoft714 commented 11 years ago

The following code blocks the given div with a centered spinner:

div.block({ message: $('#progress'), css: { padding: 20, textAlign: 'center', border: 'none', width: '50px', top: ((div.height() - 50) / 2) - 20 + 'px', left: ((div.width() - 50) / 2) - 20 + 'px', backgroundColor: '#fff', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', 'border-radius': '10px', cursor: 'wait' } });

where $('#progress') is a div on my page which contains an img tag pointing to a spinning GIF. This has worked fine until I upgraded to Twitter Bootstrap 3.0. Now the sizing and position is totally off. I'm using MVC4 and I've tried adjusting the position of the JS file on the page (I've found that Twitter can interfere with jQuery UI in certain ways if included in the wrong order), but no luck. Anyone experience anything similar when upgrading from Twitter Bootstrap 2.3 to 3.0?

Andrew

magicsoft714 commented 11 years ago

I'm not sure why upgrading Twitter Bootstrap causes an issue, but I was able to fix it my explicitly setting the width of my img tag, as well as changing the width in the CSS of the BlockUI.