Ag-grid's default behavior is to set a fixed column menu width, but their documentation provides an example of how to change it to a different fixed value. However, the drawback of this method is that all columns end up with the same menu width.
Is there a way to dynamically adjust the column menu width based on the filter list values for each column? Unfortunately, trying to set a dynamic width using the following CSS rule has no effect:
.ag-set-filter-list {
width: auto;
}
Another potential solution could be word wrapping, but attempting to implement it with the following CSS rule also does not work:
.ag-set-filter-list {
overflow-wrap: break-word;
}
I even attempted to use the postPopup callback to adjust styling after rendering, but unfortunately, it was unsuccessful:
created() {
this.postProcessPopup = (params) => {
if (params.type !== 'columnMenu') {
return;
}
params.ePopup.style.overflowWrap = "break-word";
params.ePopup.style.width = "auto";
}
}