Javascript 角度ng网格固定页眉在第一页加载时不是静态的

当我首先用我的ng网格加载页面，然后调整网格列的大小，这样我需要水平滚动才能看到所有的列时，第一列不会保持静态。刷新页面后，网格从localstorage加载列设置，然后第一个列保持静态。我正在使用一个定制的headerCellTemplate，我已经设置了enablePinning:true和第一列Pinning:true。我试图弄清楚如何让第一列在初始页面加载时保持静态

代码：

获取网格列

function getDefaultGridOptions() {
    return {
        data: 'gridNumbers',
        enableSorting: true,
        enableColumnResize: true,
        showGroupPanel: true,
        enableCellGrouping: true,
        showColumnMenu: true,
        enablePinning: true,
        showFilter: true,
        jqueryUITheme: true,
        columnDefs: 'headers',
        sortInfo:{fields:['metric_sum_event_cost'], directions:['desc']},
        plugins: [new ngGridFlexibleHeightPlugin({"maxHeight": 500}), new ngGridCsvExportPlugin()],
        showFooter: true,
        footerTemplate: 'app/common/partials/footer-template.html',
        footerRowHeight: 43
    }
};


// watch when any column settings changed from grid settings and saved into localstorage
$scope.$watch('drugCostGridOptions.$gridScope.columns', functionChangeGrid, true);

// callback for watchers
function functionChangeGrid(newVal, oldVal) {
    var config = [];
    angular.forEach(newVal, function (col) {
        config.push(_.pick(col, 'field', 'displayName', 'width', 'visible', 'headerCellTemplate', 'cellFilter', 'cellTemplate', 'pinned'));
    });
    drugCostsService.setCustomGridColumns(currentState, config);
}

---

解决了问题-看起来我的固定列需要以像素为单位定义宽度，而不是百分比：

var adverseEvent = {
    field: 'event_label',
    width: '300',
    pinned: true,
    visible: true,
    displayName: 'Adverse Event',
    headerCellTemplate: headerTemplate,
    cellTemplate: '<div class="ngCellText pull-left">{{row.getProperty(col.field) }}</div>'
};

var敌手事件={
字段：“事件标签”，
宽度：“300”，
对,，
可见：对，
displayName:'不良事件'，
headerCellTemplate:headerTemplate，
cellTemplate:“{row.getProperty（col.field）}”
};

function getDefaultGridOptions() {
    return {
        data: 'gridNumbers',
        enableSorting: true,
        enableColumnResize: true,
        showGroupPanel: true,
        enableCellGrouping: true,
        showColumnMenu: true,
        enablePinning: true,
        showFilter: true,
        jqueryUITheme: true,
        columnDefs: 'headers',
        sortInfo:{fields:['metric_sum_event_cost'], directions:['desc']},
        plugins: [new ngGridFlexibleHeightPlugin({"maxHeight": 500}), new ngGridCsvExportPlugin()],
        showFooter: true,
        footerTemplate: 'app/common/partials/footer-template.html',
        footerRowHeight: 43
    }
};


// watch when any column settings changed from grid settings and saved into localstorage
$scope.$watch('drugCostGridOptions.$gridScope.columns', functionChangeGrid, true);

// callback for watchers
function functionChangeGrid(newVal, oldVal) {
    var config = [];
    angular.forEach(newVal, function (col) {
        config.push(_.pick(col, 'field', 'displayName', 'width', 'visible', 'headerCellTemplate', 'cellFilter', 'cellTemplate', 'pinned'));
    });
    drugCostsService.setCustomGridColumns(currentState, config);
}

var adverseEvent = {
    field: 'event_label',
    width: '300',
    pinned: true,
    visible: true,
    displayName: 'Adverse Event',
    headerCellTemplate: headerTemplate,
    cellTemplate: '<div class="ngCellText pull-left">{{row.getProperty(col.field) }}</div>'
};