ui.bootstrap 手风琴容器宽度问题答案

【问题标题】：ui.boostrap accordion container width issueui.bootstrap 手风琴容器宽度问题
【发布时间】：2014-08-01 05:01:50
【问题描述】：

我在 ui.bootstrap 手风琴中使用 ng-Grid 时遇到问题。查看我的 Plunker 以了解问题的实际效果。

基本上，当在初始页面加载时关闭子手风琴组的手风琴内放置网格时，网格的宽度被分配为零并且不显示。

任何人都可以通过调整 CSS 类或捕获手风琴组事件并重新渲染网格来为我指明解决此问题的方向吗？这个我一直在兜圈子！

编辑：抱歉，Plunker 现已公开！

【问题讨论】：

【解决方案1】：

嗯，这很奇怪，因为它在 firefox 上完美运行，但在 chrome 上却不行。

通过在css中设置gridStyle为100%的宽度，表格显示出来了，但宽度为150px，更奇怪了。

然后我注意到，一旦您调整窗口大小，宽度就会调整。这使我想到了这个（黑客式）解决方案：

使用触发强制调整大小的函数将控制器添加到脚本中。

    function myCtrl ($scope){
    $scope.resizer=function(){
      $(window).trigger('resize');
    }

在手风琴标签中添加控制器和对所述功能的点击和调用。

<accordion ng-controller='myCtrl' ng-click="resizer()">

这适用于 Firefox 和 Chrome。 Plunker is here

当然，这更多的是一种解决方法而不是答案，并且没有在其他浏览器上进行彻底测试，但它可能对您有所帮助。

【讨论】：