Javascript UI网格行已折叠

我是一个角度开发人员，使用UI网格，具有非常棒的特性。 我所有的报告页面都有UI网格，但是，我发现了一个错误。 当我最初启动网页时，它会给我一个坏表。它时常发生，就像如果我尝试10次，可能会有3次坏掉的用户界面。 我会附上它的图像。 我希望任何遇到这个问题的人都知道如何解决它

JavaScript

        $scope.gridOptions.data = arr;
         // arr is the array of objects which is for example { Date:"",List:"",Frame:"",Order:""....etc}
        $scope.gridOptions.columnDefs =[
            {name:'Date',displayName: 'Date', enableCellEdit: true, type : 'String', minWidth: 100},
            {name:'Project',displayName: 'Project #', enableCellEdit: true, type : 'String', minWidth: 100},
            {name:'Order',displayName: 'Order #', enableCellEdit: true, type : 'Int', minWidth: 100},
            {name:'List',displayName: 'List #', enableCellEdit: true, type : 'Int', minWidth: 100},
            {name:'Frame',displayName: 'Frame #', enableCellEdit: true, type : 'Int', minWidth: 100},
            {name:'Size',displayName: 'Size', enableCellEdit: true, type : 'String', minWidth: 100},
            {name:'Details',displayName: 'Details', enableCellEdit: true, type : 'String', minWidth: 100},
            {name:'reason',displayName: 'Reason', enableCellEdit: true, type : 'String', minWidth: 100},
            {name:'column1',displayName: 'column1', enableCellEdit: true, type : 'String', minWidth: 100},
            {name:'column2',displayName: 'column2', enableCellEdit: true, type : 'String', minWidth: 100},
            {name:'column3',displayName: 'column3', enableCellEdit: true, type : 'String', minWidth: 100}
        ];
            $scope.gridOptions.enableRowSelection= true;
            $scope.gridOptions.multiSelect = true;

CSS

---

你是如何安排桌子的？有子表吗？如果你能发布代码，那会很有帮助。也发布css代码。看起来更像css问题。我提供了。它应该是一个简单的插件。你是如何构造这个表的？有子表吗？如果你能发布代码，那会很有帮助。也发布css代码。看起来更像css问题。我提供了。它应该是一个简单的插件。

     #body{
         background-color:#ffffff;
     }
    #loginBody{
    background-color:#46b8da;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
     }
     #emptyDiv{
    text-align: center;
    font-size: 40px;
    margin-top:10px;
     }
    #mainBody{
    /*padding:0px;*/
    margin:0px;
    /*position:absolute; top:0; bottom:0; left:0; right:0;*/
    background-color:white;
    }

     #calendarDiv,#boothTestInput{
       float:left;
    }
   /*Login page*/
    .logginPanel{
    margin-top: 100px;
    background-color:snow;
    border-radius: 3px;
    }
    .panel-title{
    font-size: 40px;
    text-align:  center;
}
.no-padding-side{
    padding-left:0px;
    padding-right:0px;
}
.no-margin-top{
    margin-top:0px;

}
.margin-left-15{
    margin-left:15px;
}
.padding-bottom-15{
    padding-bottom: 15px;
}

.table-with-total tr:last-child td{
    border-top-width: thick;
}
/*#mainPanel{
    background-color:snow;
    padding:5px;
}*/
#mainPanel{
    padding-right:0px;
    minheight: 600px;
    background-color: #f7f6ff;
    box-shadow: 3px 3px 3px #7c7c7c;
}
.extraSmall{
    font-size:9px;
}
.height-600{
    height: 600px;
}

.height-600-default{
    height:600px;
}
.margin-top-60{
    margin-top:60px;
}
.margin-top-90{
    margin-top:90px;
}
.margin-top-10{
    margin-top:10px;
}

.padding-side-5{
    padding-left:5px;
}
.margin-top-40{
    margin-top:40px;
}

.left-vertical-slide{
    border-left: 1px;
}
.divider{
    margin-right:10px;
}

#boothTestTbl tr:last-child{
    boder:1px;
}

/*.panel {
    height: 100%;
}
.panel-body {

    padding-bottom: 15px;
}*/
.height100Per {


    height: 100%;
}

.x-large-font ul li a{
    font-size :x-large;
}

.divider:before {
    content:" ";
    margin:0 35px;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #666666;
}

.selectType{
    height:35px;
}

.min-height-600{
    min-height: 600px;
}

.background-mainview{
    background-color: #fbffff;
    border-left:1px;

    -webkit-box-shadow: -5px 0px 17px -9px rgba(0,0,0,1);
    -moz-box-shadow: -5px 0px 17px -9px rgba(0,0,0,1);
    box-shadow: -5px 0px 17px -9px rgba(0,0,0,1);
}

form[name = "userForm"] p    {color :red  }
.grid {

    margin-top:5px;
    padding:0px;

}
.margin-top{
    margin-top:60px;
}

#grid2 {
   // width: 500px;
    height: 100%;
}
.margin-top-5{
    margin-top:5px;
}

#jumboBtn {
    /*position: absolute;*/
    width: 200px;
    height: 200px;

}
#jumboBtnForMobile{
    width: 100px;
    height: 100px;

}

#onlyOneDayLabel{
    font-size: 10px;
    padding-right:5px;
}
.drowName{
   padding-left:50px;
}
.drowNameForMobile{
    padding-left:10px;
}
#listContainer{
    border-radius: 5px;
    background: #ececec;
    list-style:none;
    overflow: auto;;
    max-height: 550px;
    margin-right:5px;
    margin-bottom:10px;
}

#inputForm{
    border:1px;
    border-radius: 3px;
}

.buttonsCollection{
    margin-bottom:10px;
}

.margin-bottom-10{
    margin-bottom:10px;
}
#calendarCollections{
    margin-top:5px;
    margin-bottom: 20px;
}
/* really specific css rules applied by angular */
/*
.animation-repeat {
    line-height: 60px;
    list-style: none;
    /!*box-sizing:border-box;*!/
    border-bottom: 0.5px solid white;
    -webkit-transition: 0.5s linear all;
    transition: 0.5s linear all;
}
*/

.inputAreaPT{
    margin-right:10px;
}

    /*animation */
.add-animation{
    left: 0;
}

.repeated-item.ng-enter, .repeated-item.ng-move {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    opacity:0;
    top: -50px;
}

.repeated-item.ng-leave-active{
    opacity: 0;
    top: -50px;
}
/*
 The ng-enter-active and ng-move-active
 are where the transition destination properties
 are set so that the animation knows what to
 animate.
*/
.repeated-item.ng-enter.ng-enter-active,
.repeated-item.ng-move.ng-move-active {
    opacity:1;
    top:0px;
}

/*
  We're using CSS keyframe animations for when
  the leave event is triggered for the element
  that has the .repeated-item class
*/
.repeated-item.ng-leave {
    -webkit-animation:0.5s my_animation;
    -moz-animation:0.5s my_animation;
    -o-animation:0.5s my_animation;
    animation:0.5s my_animation;
}

@keyframes my_animation {
    from { opacity:1; }
    to { opacity:0; }
}

/*
  Unfortunately each browser vendor requires
  its own definition of keyframe animation code...
*/
@-webkit-keyframes my_animation {
    from { opacity:1; }
    to { opacity:0; }
}

@-moz-keyframes my_animation {
    from { opacity:1; }
    to { opacity:0; }
}

@-o-keyframes my_animation {
    from { opacity:1; }
    to { opacity:0; }
}


    /*buttons*/
#reportNav div {
    color:white;
    zoom: 1;
    background: #36b0b6;
    background: -moz-linear-gradient(top,#c6c6c6  0%, #ededed 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));
    background: -webkit-linear-gradient(top, #c6c6c6  0%, #ededed 100%);
    background: -o-linear-gradient(top, #c6c6c6  0%, #ededed 100%);
    background: -ms-linear-gradient(top, #c6c6c6  0%, #ededed 100%);
    background: linear-gradient(top, #c6c6c6  0%, #ededed 100%);
    padding: 5px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#reportNav div ul li a {
    color:black;
}
#reportNav .mobileV li a{
    padding-top : 0px;
    padding-bottom: 0px;
}

#reportNav div ul .activeNav a{
    color:white;
}

#reportNav div ul li a:hover{
    color:white;
}

#reportNav div ul li:before{
    content:" ";
    position: absolute;
    top: 0;
    right: 5px;
    bottom: 0;
    width: 1px;
    background: #666666;
}

.divPageLoadingIcons {
    position: absolute;
    width: 30px;
    height: 30px;
    text-align: center;
    background-image: url("../img/ajax-loader.gif");
    top: 0;
    bottom: 0;
    left: 0;
    right: 20%;
    margin: auto;
}

@media print {
    thead {display: table-header-group;}
}