0

I'm trying to create a custom typeahead in my ui-grid header for filtering purposes and I blocked on a css issue. I want that my filter-child directive is displayed over the grid rows. I cannot achieve that using overflow: visible; or with z-index property.

here is my plunker

Thanks in advance.

magneto
  • 105
  • 2
  • 15
  • try `typeahead-append-to-body="true"` in your header template – Pratik Bhat May 23 '16 at 19:11
  • I think this solution could work when you use angular-ui, which is not the case for my project. – magneto May 24 '16 at 06:45
  • Could you please provide a plunker for this? the information provided isn't adequate to troubleshoot / answer accurately. – Brian May 24 '16 at 22:29
  • I provided a plunker. Maybe I should explain it better. The first column 'Name' is filtered with `filterParent` directive. When you inspect its text input (with mouse right click menu) you will se that in `ng-transclude` there is a `filter-child` directive which is hidden under grid rows. And this is my problem, I don't know how to display it above the rows. I hope it's more understandeble now. – magneto May 25 '16 at 07:57
  • If you inspect the HTML you'll notice that the divs with the classes `ui-grid-top-panel` and `ui-grid-header-viewport` have CSS of `overflow: hidden`. Disabling these (or changing them both to `overflow: visible`) does allow the `filter-child` to be seen. However I'm reluctant to recommend this as an answer as I assume `ui-grid-top-panel` and `ui-grid-header-viewport` have `overflow: hidden` for a reason. See [here](https://plnkr.co/edit/MGCYPrZVeJmwuJ1z2VAj?p=preview) for a Plunkr – Ian A May 31 '16 at 10:28
  • Thanks Ian, your solution worked for me. But you are right, it's more a hack then a solution, but I didn't see any impact on my grid. – magneto May 31 '16 at 16:45

0 Answers0