Angular Slick-grid Column picker icon hidden behind grid-menu icon, on setting column width manually

Question

I am using angular-slickgrid for my project. When set column width manually the column picker icon is hiding behind the grid-menu icon. I found the same issue being resolved for the sort icon in this link. But I could not find the solution for the column picker icon.

My current version of angular slick-grid is 2.19.0, I also tried upgrading it to 2.22.1, still it is the same. But the demo does not have this issue even after I set width manually. I could not find what I'm missing.

GridOptions = {
  enableAutoSizeColumns: false,
  autoFitColumnsOnFirstLoad: false,

  enablePagination: true,
  enableAutoResize: true,
  enableSorting: true,
  enableFiltering: true,
  i18n: this.translateService,
  showPreHeaderPanel: false,
  createPreHeaderPanel: true,
  rowHeight: 40,
  preHeaderPanelHeight: 40,
  gridMenu: {
    hideExportExcelCommand: true,
    customItems: [{
        command: "cspfm-excel-export",
        titleKey: "EXPORT_TO_EXCEL",
        iconCssClass: "fa fa-file-excel-o",
        action: (event, callbackArgs) => {
          this.excelExport(event, callbackArgs)
        }
      },
      {
        command: "cspfm-csv-export",
        titleKey: "EXPORT_TO_CSV",
        iconCssClass: "fa fa-download",
        action: (event, callbackArgs) => {
          this.excelExport(event, callbackArgs)
        }
      }, {
        command: "cspfm-groupby",
        titleKey: "Group-by",
        iconCssClass: "icon-mat-account_tree",
        action: (event, callbackArgs) => {
          this.openDraggableGroupingRow(childObjectName)
        }
      }, {
        command: "cspfm-clear-groupby",
        titleKey: "Clear Grouping",
        iconCssClass: "fa fa-times",
        action: (event, callbackArgs) => {
          this.clearGrouping(childObjectName)
        }
      }
    ],
  },
  enableDraggableGrouping: true,
  draggableGrouping: {
    dropPlaceHolderText: 'Drop a column header here to group by the column',
    deleteIconCssClass: 'fa fa-times',
    onGroupChanged: (e, args) => {
      this.onGroupChanged(args, childObjectName)
    },
    onExtensionRegistered: (extension) => {
      const childObject = this.getChildObject(childObjectName);
      childObject['draggableGroupingPlugin'] = extension
    },
  },
  enableAutoTooltip: true,
  autoTooltipOptions: {
    enableForCells: true,
    enableForHeaderCells: true,
    maxToolTipLength: 1000
  },
  headerMenu: {
    hideColumnHideCommand: true
  },
  autoResize: {
    containerId: this.gridContainerId,
    calculateAvailableSizeBy: 'container'
  },
  exportOptions: {
    exportWithFormatter: true
  },
  excelExportOptions: {
    exportWithFormatter: true,
  },
  enableTranslate: true,
  presets: {
    sorters: [{
      columnId: "",
      direction: 'ASC'
    }],
  },
  enableAsyncPostRender: true, // for the Angular PostRenderer, don't forget to enable it
  asyncPostRenderDelay: 0, // also make sure to remove any delay to render it
  params: {
    angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)
  }
}

columnDefinition = [{
  id: this.tableColumnInfo['pfm1941']['pfm2061_3121_departmentname']['id'],
  nameKey: this.tableColumnInfo['pfm1941']['pfm2061_3121_departmentname']['label'],
  field: this.tableColumnInfo['pfm1941']['pfm2061_3121_departmentname']['prop'],
  sortable: true,
  type: FieldType.string,
  exportCustomFormatter: CspfmDataFormatter,
  // minWidth: this.columnMinWidth,
  formatter: CspfmDataFormatter,
  width: 250,
  filterable: true,
  filter: {
    model: Filters.compoundInput
  },
  grouping: {
    getter: (data) => {
      return this.getter(data, this.tableColumnInfo['pfm1941']['pfm2061_3121_departmentname'])
    },
    formatter: (groupingFormatterItem: GroupingFormatterItem) => {
      return this.formatter(groupingFormatterItem, this.tableColumnInfo['pfm1941']['pfm2061_3121_departmentname']['label'])
    },
    predefinedValues: [this.tableColumnInfo['pfm1941']['pfm2061_3121_departmentname']],
    collapsed: true
  },
  cssClass: 'left-align',

  params: {
    columnWidth: 100,
    pipe: this.cspfmDataDisplay,
    fieldInfo: this.tableColumnInfo['pfm1941']['pfm2061_3121_departmentname']
  }
}]

Output: