Geek Answers Handbook

How can I get ExtJS 4.1.1 to ruin the Twitter Bootstrap 2.2.1 layout?

I really don't like ExtJS, but I have to use it. I want to use Twitter Bootstrap 2.2.1 for the main layout and ExtJS for meshes and JS (policy).

I have an awesome Bootstrap design, but the minute I load ExtJS, navbar, fonts, etc., everything closes.

Is there a way to get them to work together without going into ExtJS and customizing tons of CSS?

The CSS file I'm using is in the following path (for ExtJS):

js/extjs/4.1.1/resources/css/ext-all-gray.css

thanks

+6
source share
2 answers

Here is my solution:
1.use ext-all-scoped.css instead of ext-all.css
2.add the following code before downloading ext-all.js

 <script type='text/javascript'> Ext = { buildSettings:{ "scopeResetCSS": true } }; </script> <script type='text/javascript' src='http://xxx.com/extjs/ext-all.js'></script>

3. delete the following declaration in ext-all-scoped.css in order to prevent extjs to redisplay the body with these css conflict declarations after loading the boot file

 .x-body { ... }
+3
source

The problem is that the rule

 .x-border-box .x-reset,.x-border-box .x-reset * {box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;}

somehow applied to all elements of the page, as well as to enter Twitter Bootstrap (tested on FF, Chrome). Therefore, you should simply provide

 box-sizing:content-box !important; -moz-box-sizing:content-box !important; /* Firefox */ -webkit-box-sizing:content-box !important; /* Safari */

for all Twitter input. Additional information about box-sizing .

I hope this helps.

+2
source

More articles:


All Articles