search

Saulis / iron-data-table

iron-data-table is a Web Component for displaying data as a table or grid. Built on top of iron-list using Polymer.
Apache License 2.0
147 stars 66 forks source link

Can't see paper-typeahead-input values when in cell of iron-data-table #109

Closed joebordes closed 8 years ago

joebordes commented 8 years ago

Hi,

I am trying to put a paper-typeahead-input inside a cell. In general I am putting all types of inputs with great success but this component has it's values hidden under the cell.

I created a ticket on that repository but since I am not sure where the problem is I thought I would report it here also, just in case.

https://github.com/cheonhyangzhang/paper-typeahead-input/issues/29

Thanks

Saulis commented 8 years ago

Hi,

this happens because of <iron-dropdown> places its overlay element inside itself – it becomes overlapped by the other row elements in the <iron-list> that have their own stacking contexts because of translating.

This is a fundamental issue that affects all components using <iron-dropdown> like <paper-menu>. I suggest using <vaadin-combo-box> which doesn't have this problem.

joebordes commented 8 years ago

Thanks for the information. I can't use vaadin-combo-box because it doesn't support remote data (at least to the best of my knowledge). I am searching against a database via ajax to filter the information. Do you know of any other component that would permit me to do that and work well with iron-data-table?

Saulis commented 8 years ago

vaadin-combo-box is the only component I know of that handles overlays so that they work within translated elements like iron-list and iron-data-table

Remote data is on the backlog: https://github.com/vaadin/vaadin-combo-box/issues/260 – meanwhile, you might be able to make a remote datasource work with the custom input element feature just released in 1.1.

Try hooking up an iron-ajax to the items property and trigger it to query for data when the value on your input changes.

web-padawan commented 8 years ago

@joebordes you can listen for iron-overlay-opened event and then set the z-index property of the corresponding iron-list item to 1 as mentioned here.

joebordes commented 8 years ago

@Saulis thanks for the pointer, I will give that a try and update the issue. Feel free to close whenever you consider.

@web-padawan that definitely helped. I played around a bit and achieved something but I'm afraid I don't know enough to fix it completely. I will keep trying. I forked and updated plunker with my latest changes (mostly CSS and the patch you reference above).

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