ui-grid
ui-grid copied to clipboard
angular-ui
UI Issue with injecting custom filters template
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?
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
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.
@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
@billyaraujo Did you find any solution?
@c0bra, do we have a any workaround here?
@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.
@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.
