Search code examples
angularjsbootstrap-typeaheadng-grid

bootstrap-typeahead is not working in ng-grid

I'm working in a project, where I have to show a typeahead in a ng-grid cell. But, the typeahead is not working in a ng grid cell. I have put a Plunker.

See that the typeahead is working in the same page above the grid. But it's not working in the ng grid cell. Can you please help?

Thanks in advance.

Solution

  • Spent quite some time tracking all the problems in your plunker, there were quite a number of them:

    • you were missing ng-model directive on the input elements used in grid's cell, there were many errors in the console
    • typeahead window is appended as an element after an input element so it means that you need to have it wrapped in a parent DOM element, ex.: <div>

    The 2 above changes made the typeahead work. Well - partially. The correct DOM structure is generated etc. but nothing gets displayed due to CSS conflicts. It seems like both typeahead popup and a cell in a grid are absolutely positioned. This is a bit surprising for a grid but OK. The real problem, though, is that the .ngCell class has the overflow: hidden; property and it makes the typeahead popup invisible.

    If you remove the overflow: hidden; from the .ngCell it all starts to "work":

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

    I guess we are facing conflicts of Bootstrap's CSS and ng-grid CSS. We can't change Bootstrap's CSS in this project so you will have to decide to either bring this issue to the attention of the ngGrid folks or hack one of the CSS definitions.