Hi,
I have an issue where my igx-combo hides the validation message behind it. I've tried playing about with the z-index to get the validation message to sit in front of the combo but it doesn't seem to be working. The combo and the message share the igx-overay__content class but even diving into this and picking out the igx-tooltip and igx-dropdown_list to access their z-index doesn't seem to function as expected.
This is what it looks like:
Do you have a proposed solution?
Thanks!
Hi Adam,
Good to hear the issues are resolved.
Thank you for using Infragistics components!
Best regards, Bozhidara Pachilova
Amazing, that now works exactly as intended.
I've marked both answers as verified even though they are solutions to different problems but they both worked perfectly so it's accurate.
Thanks so much for your help!
Thank you for clarifying how the layout in your app is structured.
I have created a fork of the previous sample, where two grids are positioned within a horizontal IgxSplitter. I am able to reproduce this behavior. Actually, it resembles a scenario that has been encountered with the stacking context of grids similarly rendered next to each other. It has been described in our documentation in the Excel Style Filtering topic here. The suggested approach works for your case as well. The above referenced fork of the StackBlitz sample demonstrates it as well. It is also in line with the approach addressing the original issue of this thread.
Please, test it on your side and let me know how it behaves.
Best regards,Bozhidara Pachilova
Thanks for the quick response!
I should have mentioned that this grid is on a screen with an igx-splitter, so there is another grid on a splitter pane to the right of this. I believe that this is why the message is being covered as the second pane seems to overlap on top of whatever content is overflowing in the left grid.
Is there a way to change the order in which splitter panes are rendered on screen? I'm not able to swap the positions of the two grids for our purposes.
I am glad that you find my suggestion helpful.
I have modified the previously referenced sample’s default ‘required’ error message to an excessively long string to test the behavior in such a scenario. It appears that the tooltip content does not overflow to the right, and rather does to the left, thus not cropping any of the text:
Additionally, on my side (testing in Chrome and Mozilla), the tooltip is rendered above the scrollbar. This makes me wonder if your app is using custom scrollbars that may be causing the grid content to display below them?
Regarding the positioning strategies approach, generally that is the way to go, however, the IgxGridCell that holds reference to the default error icon and its tooltip directive is not exposed by the public API and I am afraid its overlay settings cannot be overridden like this.
Having the above considerations in mind, the custom workaround approach that you have figured might also work for you, however, my current suggestion is investigating why the scrollbars in your app are rendered above the grid content.