Ui-grid列在悬停时扩展

Question

我正在使用角度为5列的ui-grid。在悬停网格选项列时，向右侧扩展。

这是我的档案。

HTML文件

<div class="full-panle-body">
    <div class="row user-view-grid" ng-show="gridOptions.data.length > 0 && userLoaded">
        <div ui-grid="gridOptions" ui-grid-auto-resize ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ng-style="getTableHeight()"></div>
    </div>
    <div class="row loading-spinner" ng-hide="userLoaded">
        <div class="col-xs-3"></div>
        <div class="loading col-xs-6">
            <span rel='spinner' class='data-spinner'></span>
            <div class="loading-text">{{::'label.loading.user.list' | translate}}</div>
        </div>
        <div class="col-xs-3"></div>
    </div>
    <div class="no-records" ng-show="!numberRecordsFound && userLoaded">
        {{:: 'text.search.no.records' | translate }}
    </div>
</div>

<!-- html template for status -->
<script type="text/ng-template" id="statusCell-template.html">
    <div ng-click="grid.appScope.onUserDetails(row.entity)" class="inner-data-cell-center">
        <div style="text-align:center;">
        <i class="fa fa-envelope-o" aria-hidden="true" style="color:grey;" ng-show="'added' == row.entity.registrationStatus.toLowerCase()"></i>
        <i class="fa fa-envelope-o" aria-hidden="true" style="color:blue;" ng-show="'notified' == row.entity.registrationStatus.toLowerCase()"></i>
        <i class="fa fa-check" aria-hidden="true" style="color:green;" ng-show="'complete' == row.entity.registrationStatus.toLowerCase()"></i>
        </div>
        <div style="text-align:center;" class="smaller-grey">{{row.entity.registrationStatus}}</div>
    </div>
</script>

<script type="text/ng-template" id="name-template.html">
    <div class="ui-grid-cell-contents" ng-click="grid.appScope.onUserDetails(row.entity)">
        <div class="name-style">{{row.entity.lastName}}, {{row.entity.firstName}}</div>
        <div class="email-style">{{row.entity.email}}</div>
    </div>
</script>

<!-- html template for organization -->
<script type="text/ng-template" id="organization-template.html">
    <div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
        <span class="dummy">{{row.entity.organization}}</span>
    </div>
</script>

<!-- html template for username -->
<script type="text/ng-template" id="username-template.html">
    <div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
        <span>{{row.entity.userName}}</span>
    </div>
</script>

<!-- html template for Account Status -->
<script type="text/ng-template" id="accountstatus-template.html">
    <div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
        <span ng-show="row.entity.isActive">Enabled</span>
        <span ng-show="!row.entity.isActive">Disabled</span>
    </div>
</script>

CSS文件

.ui-grid-row:hover{
    border-left: solid 6px @hoverBlue;
}

JS档案

$scope.gridOptions = {
    rowHeight: 60,
    multiSelect: false,
    enableColumnMenus: false,
    enableEdit: false,
    enableSoring: true,
    columnDefs: [
        {
            name: 'registrationStatus',
            width: "15%",
            displayName: 'Status',
            headerCellClass: 'grid-header-center',
            cellClass: 'grid-data-cell',
            cellTemplate: 'statusCell-template.html'
        },
        {
            name: 'lastName',
            width: "30%",
            displayName: 'Name',
            headerCellClass: 'grid-header-left',
            cellTemplate: 'name-template.html'
        },
        {
            name: 'organization',
            width: "15%",
            displayName: 'Organization',
            headerCellClass: 'grid-header-left',
            cellTemplate: 'organization-template.html'
        },
        {
            name: 'userName',
            width: "20%",
            displayName: 'Username',
            headerCellClass: 'grid-header-left',
            cellTemplate: 'username-template.html'
        },
        {
            name: 'isActive',
            width: "20%",
            displayName: 'Account Status',
            headerCellClass: 'grid-header-left',
            cellTemplate: 'accountstatus-template.html'
        }
    ]
};

嗨。我正在使用角度为5列的ui-grid。在悬停网格选项列时，向右侧扩展。