How to get custom select floating filter to be full width of column in ag-grid angular

Question

I'm cannot seem to get a custom floating filter component to be the full width of a column using ag-grid in angular 8. I have the follow template and css for my component:

@Component({
    template: `
        <select [(ngModel)]="selectedOption" (ngModelChange)="valueChanged()">
            <option value="all">All</option>
            <option value="true">True</option>
            <option value="false">False</option>
        </select>`,
    styles: ['select {width: 100%;}']
})

when I look at the elements in chrome it appears that the filter component is not inheriting the width of its parent. does ag-grid provide a simple way to do this or is there another way using css?

Answer 1

I ended up having to query my input element from from the dom then I got the parent element of my input element and set the width to '100%' and that worked for me.

So in your 'onParentModelChanged' function add the new line below:

onParentModelChanged(parentModel: any) {
       document.querySelector('#YOUR_FLOATING_FILTER_INPUT_ID').parentElement.style.width = '100%'; // <- This is the new line
       // When the filter is empty we will receive a null value here
       if (!parentModel) {
           this.currentValue = null;
       } else {
           this.currentValue = parentModel.filter;
       }
   }

Don't forget to add the id to the input element. I hope there's a better way to do this but for now that's what I'm going with.

You could also add a flag to check if its already been set so you don't keep resetting the value.