How to change width of dropdownlist in agRichSelectCellEditor

user_6843781 0
Viewed 2558

I'm using agRichSelectCellEditorcomponent and i have select option with long label. I would like to change the width of my dropdownlist but I saw that .ag-rich-select-list have a width of 200px. I can increase this width but I would like to have a dynamic width depending on my options width but these option are in position absolute.

I tried to make a directive but that was not realy concluding...

Any idea to achieve that ?

ag-grid angular
1 Answers

Note: This answer uses plain javascript, not angular.

You can do this by overriding the width of the list (to remove the 200px restriction):

.ag-theme-balham .ag-rich-select .ag-rich-select-list {
  width: auto !important;
}

(this is for the "balham" theme - .ag-theme-balham, change as required)

Then add a cellRenderer to the editorParams that specifies a width:

cellEditorParams = {
   values: values,
   cellRenderer: function cellRenderer(params) {
     return `<div style="display:inline-block;width:400px;">${params.value || ''}</div>`;
   },
};

Note: because of the css override, you will need to provide a cellRenderer for all your agRichSelectCellEditors - otherwise the editor will be much too narrow with width: auto.

user_1680060
Related