UI Issue with injecting custom filters template

[msrikanth508]

I am trying inject custom filters (Angualr ui-select controls) using filterHeaderTemplate property.
Filter controls are getting rendered successfully but facing UI issues.

Filter controls are not visible properly.

As control is rendering in "ui-grid-header-canvas" element, because of overflow-hidden property it is happening.

But, when I added following styles

.ui-grid-header-viewport {
overflow: visible;
}

.ui-grid-top-panel {
overflow: visible;
}

.ui-grid-cell > .ui-grid-cell-contents {
overflow: visible;
}

grid becomes

Is there any way where it can be rendered properly?

[msrikanth508]

@c0bra / @PaulL1 Could you please chime in here?

[bjaraujo]

Having same problem:

http://plnkr.co/edit/rtUZ2nY39Bu7GUQZmuDw?p=preview

But your solution seems to fix. Although not sure if it is the best way to do this. The dropdown is there but behind the div.

With the css change you suggest:

http://plnkr.co/edit/zcAu3jN7wpMy2l80PS3f?p=preview

Related: #4506

[c0bra]

If you take a look here: http://brianhann.com/ui-grid-and-dropdowns/ you'll see I used UI-Select and the append-to-body option to get around the overflow issue.

[msrikanth508]

@c0bra Thank you for article that you have pointed out. It is working great after using "append-to-body" option like

But, it is behaving strangely while scrolling when drop-down is opened

[msrikanth508]

@billyaraujo Did you find any solution?

@c0bra, do we have a any workaround here?

[bjaraujo]

@msrikanth508 Changing the css seems to help but not sure that is right way to go. On the other hand, not all controls have the option append-to-body.

So I am still waiting for a better solution for this.

[ichintan]

Any better solution to this?

[meenakshijha]

@msrikanth508 Did this get resolve for you? I am stuck with the same issue. Infact after doing the css changes you recommended , I got the same issue like yours. Append-to-body tag not working for me. Can you help here? Thx

PS: I am not using angular ui-select since i want multi select functionality.

[sun1711asd]

@msrikanth508 Can share the sample code is a for me? email: sunyanjunsoft@126.com
thanks!

[Akhilll00]

how to resolve same problem in react Bootstrap