Оборачивание всей сетки пользовательского интерфейса в div

Question

Я создаю пользовательский интерфейс и пытаюсь его стилизовать.Я хочу, чтобы меню сетки (меню гамбургеров в правом верхнем углу UI-сетки) было такой же высоты, как вся UI-сетка, то есть такая же высота, как заголовок + все строки.Когда я смотрю на свою UI-сетку из инструмента разработчика Mozilla, меню сетки находится внутри div для строки заголовка UI-сетки.этот div автоматически генерируется из API пользовательского интерфейса.Есть ли способ, которым я могу переместить div для меню сетки из его местоположения по умолчанию внутри div ui-grid-viewport, который охватывает всю ui-сетку.если я могу сделать это, тогда я могу установить высоту меню сетки на 100%, так что он всегда будет того же размера, что и ui-grid.

Controller

'use strict'

angular.module('main')
    .controller('mainCtrl', function($scope, $filter, uiGridConstants) {

        // ********************************************
        // ui-grid configuration and functionality
        // ********************************************


        $scope.atlasUserMonitorGrid = {

            // Dummy test data
            data: [
                {counter: 1, username: 'bob27', last_view: '27/12/2018', total_views: 48, group: 'group 1', data_view: 32, records: 3, crosstabs: 8, reports: 5, explorer: 3, bookmarks: 2},
                {counter: 2, username: 'sarah01', last_view: '04/01/2019', total_views: 8, group: 'group 2', data_view: 2, records: 2, crosstabs: 7, reports: 4, explorer: 2, bookmarks: 12},
                {counter: 3, username: 'jono0501', last_view: '09/01/2019', total_views: 33, group: 'group 1', data_view: 12, records: 7, crosstabs: 4, reports: 18, explorer: 78, bookmarks: 44},
                {counter: 4, username: 'peterh', last_view: '21/01/2019', total_views: 33, group: 'group 3', data_view: 111, records: 12, crosstabs: 6, reports: 55, explorer: 9, bookmarks: 5},
                {counter: 5, username: 'joe201', last_view: '11/02/2019', total_views: 34, group: 'group 1', data_view: 3, records: 17, crosstabs: 24, reports: 128, explorer: 178, bookmarks: 144},
                {counter: 6, username: 'amy_mcN', last_view: '25/01/2019', total_views: 65, group: 'group 2', data_view: 212, records: 27, crosstabs: 14, reports: 718, explorer: 278, bookmarks: 244},
                {counter: 7, username: 'ke', last_view: '15/02/2019', total_views: 1156, group: 'group 3', data_view: 1124, records: 47, crosstabs: 64, reports: 17, explorer: 378, bookmarks: 344},
            ],

            columnDefs: [
                {
                    field: 'counter',
                    displayName: '',
                    name: 'Counter',
                    type: 'number',
                    sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                    enableSorting: false,
                    enableFiltering: false,
                    width: 45
                },
                {
                    field: 'username',
                    displayName: 'Username',
                    name: 'Username',
                    type: 'string',
                    sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                    enableSorting: true,
                    enableFiltering: false,
                },
                {
                    field: 'last_view',
                    displayName: 'Last View',
                    name: 'Last View',
                    type: 'date',
                    sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                    enableSorting: true,
                    enableFiltering: false,
                    filter: {
                        condition: uiGridConstants.filter.EXACT
                    }
                },
                {
                    field: 'total_views',
                    displayName: 'Total Views',
                    name: 'Total Views',
                    type: 'number',
                    sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                    enableSorting: true,
                    enableFiltering: false,
                    filters: [
                        {
                          condition: uiGridConstants.filter.GREATER_THAN,
                          placeholder: 'greater than'
                        },
                        {
                          condition: uiGridConstants.filter.LESS_THAN,
                          placeholder: 'less than'
                        }
                    ]
                },
                {
                    field: 'group',
                    displayName: 'Group',
                    name: 'Group',
                    type: 'string',
                    sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                    enableSorting: true,
                    enableFiltering: false
                },
                {
                    field: 'data_view',
                    displayName: 'Data View',
                    name: 'Data View',
                    type: 'number',
                    sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                    enableSorting: true,
                    enableFiltering: false,
                    filters: [
                        {
                          condition: uiGridConstants.filter.GREATER_THAN,
                          placeholder: 'greater than'
                        },
                        {
                          condition: uiGridConstants.filter.LESS_THAN,
                          placeholder: 'less than'
                        }
                    ]
                },
                {
                    field: 'records',
                    displayName: 'Records',
                    name: 'Records',
                    type: 'number',
                    sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                    enableSorting: true,
                    enableFiltering: false,
                    filters: [
                        {
                          condition: uiGridConstants.filter.GREATER_THAN,
                          placeholder: 'greater than'
                        },
                        {
                          condition: uiGridConstants.filter.LESS_THAN,
                          placeholder: 'less than'
                        }
                    ]
                },
                {
                    field: 'crosstabs',
                    displayName: 'Crosstabs',
                    name: 'Crosstabs',
                    type: 'number',
                    sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                    enableSorting: true,
                    enableFiltering: false,
                    filters: [
                        {
                          condition: uiGridConstants.filter.GREATER_THAN,
                          placeholder: 'greater than'
                        },
                        {
                          condition: uiGridConstants.filter.LESS_THAN,
                          placeholder: 'less than'
                        }
                    ]
                },
                {
                    field: 'reports',
                    displayName: 'Reports',
                    name: 'Reports',
                    type: 'number',
                    sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                    enableSorting: true,
                    enableFiltering: false,
                    filters: [
                        {
                          condition: uiGridConstants.filter.GREATER_THAN,
                          placeholder: 'greater than'
                        },
                        {
                          condition: uiGridConstants.filter.LESS_THAN,
                          placeholder: 'less than'
                        }
                    ]
                },
                {
                    field: 'explorer',
                    displayName: 'Explorer',
                    name: 'Explorer',
                    type: 'number',
                    sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                    enableSorting: true,
                    enableFiltering: false,
                    filters: [
                        {
                          condition: uiGridConstants.filter.GREATER_THAN,
                          placeholder: 'greater than'
                        },
                        {
                          condition: uiGridConstants.filter.LESS_THAN,
                          placeholder: 'less than'
                        }
                    ]
                },
                {
                    field: 'bookmarks',
                    displayName: 'bookmarks',
                    name: 'bookmarks',
                    type: 'number',
                    sortDirectionCycle: [uiGridConstants.ASC, uiGridConstants.DESC],
                    enableSorting: true,
                    enableFiltering: false,
                    filters: [
                        {
                          condition: uiGridConstants.filter.GREATER_THAN,
                          placeholder: 'greater than'
                        },
                        {
                          condition: uiGridConstants.filter.LESS_THAN,
                          placeholder: 'less than'
                        }
                    ],
                }
            ],

            pagination: {
                pageSize: 5,
                pageSizes: [2, 5, 10]
            }
        };
    });

директива

angular.module('main')
    .directive('openappUiGrid', function() {
        return {
            restrict: 'AE',
            scope: {
                data: '=openappUiGrid',
                columns: '=columnDef',
                pagination: '=?'
            }, // end scope:
        compile: function() {
            return {
                pre: function(scope, iElem, iAttrs) {
                    scope.options = {
                        data: scope.data,
                        columnDefs: scope.columns,
                        paginationPageSize: ('pagination' in scope) ? scope.pagination.pageSize : 10,
                        paginationPageSizes: ('pagination' in scope) ? scope.paginationPageSizes : [10, 15, 20],
                        enablePaginationControls: false,
                        enableGridMenu: true
                    } // end scope.options
                } // end pre:
            }; // end compile: return
        }, // End compile:
        templateUrl: static_url + 'js/angular/templates/atlas-user-monitor-ui-grid.html',
    }// end directive return
}) // end directive

template

<div>
  <form>
    <i ng-click="api.pagination.seek(1)">first_page</i>
    <i ng-click="api.pagination.previousPage()">previous_page</i>
    <label>
      <span>Page {{ api.pagination.getPage() }} </span>
      <span>of {{ api.pagination.getTotalPages() }} </span>
    </label>
    <i ng-click="api.pagination.nextPage()">next_page</i>
    <i ng-click="api.pagination.seek(api.pagination.getTotalPages())">first_pages</i>
  </form>
</div>

<div class="grid-holder">
    <div ui-grid="options" ui-grid-pagination></div>
</div>

высота меню сетки при значении 100% соответствует строке заголовка, а не всей сетке