10 months ago

SlickGrid套件在Bootstrap3所遇到的問題

SlickGrid在Jquery套件表現非常搶眼,但也似乎是因為年久失修,造成與Bootstrap3的css衝突問題,這部分的解決方式在這裡可以看到Conflict with bootstrap 3 #742,那麼這上面有許多解法,這邊我個人是推薦下面方式。

修改CSS

[class^="slickgrid_"],
[class^="slickgrid_"] div {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

修改slick.grid.js

如果你的Grid元件想要讓使用者可resize那麼修改applyColumnHeaderWidths方法是一定要的,否則在拖拉的時候,又會不對齊了,但這方法只適用jQuery1.8以後的版本。

if (h.outerWidth() !== columns[i].width - headerColumnWidthDiff) {
    h.outerWidth(columns[i].width - headerColumnWidthDiff);
}
← [Spring MVC] CH 2. Spring Aspect-Oriented Programming (AOP) [Web Security] What is Token ? →
 
comments powered by Disqus