CODEWITHSUNDEEP
cssangularjsangular-uiangular-ui-grid
pSoLT
pSoLT

Reputation: 1052

angular-ui-grid does not render properly inside nested ui-views

I am using AngularJS with ui-grid and ui-view in an attempt to create a page with a tabbed container. Content of each tab (typically a ui-grid) is being displayed within a ui-view:

<div class="tabbed-container">
    <uib-tabset>
        <uib-tab ng-repeat="t in tabs" select="go(t.route)" active="t.active">
            <uib-tab-heading>
                <i class="glyphicon glyphicon-{{t.icon}}"></i>
                {{t.heading}}
            </uib-tab-heading>
        </uib-tab>
    </uib-tabset>
    <div ui-view></div>
</div>

The content may look like this:

<div class="panel">
    <div ui-grid="gridOptions" ui-grid-infinite-scroll ui-grid-selection ui-grid-tree-view ui-grid-resize-columns class="grid"></div>
</div>

The problem is that the ui-grid does not vertically fill the container - it's set to minimum height. All the css classes related to "panel" state only "height:100%", the height is not set anywhere else. Attempt of debugging this situation made me realize, that ui-view is correctly filled by a grid which size is incorrectly calculated. The tabbed-container is nested in other ui-view. Does anyone have a clue what could cause such behaviour or what could I try to fix it?

Upvotes: 3

Views: 907

Answers (1)

pSoLT
pSoLT

Reputation: 1052

The problem was caused by not passing proper style to the content to ui-view. The solution was to use flex, set "flex:1" on container and pass it to ui-view. 

.tabbed-container
{
    flex: 1;
    display: flex;
    flex-flow: column;

    /* Setting min-size is necessary to prevent weird flex behaviour on chrome and firefox */
    min-height: 100px;
    min-width: 100px;

   .tab-content
   {       
       flex:1;

   /* Setting min-size is necessary to prevent weird flex behaviour on chrome and firefox */
       min-height: 100px;
       min-width: 100px;
   }
}

html:

<div class="tabbed-container">
    <uib-tabset>
        <uib-tab ng-repeat="t in tabs" select="go(t.route)" active="t.active">
            <uib-tab-heading>
                <i class="glyphicon glyphicon-{{t.icon}}"></i>
                {{t.heading}}
            </uib-tab-heading>
        </uib-tab>
    </uib-tabset>
<div class="tab-content" ui-view></div>

Upvotes: 1

Related Questions