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,
Thank you for posting to Infragistics Community!
I have been looking into your question and was able to reproduce the described behavior for a grid column with a validation error, whose editor template contains an igx-combo. After further investigation, I determined that this is due to the different outlets in which the combo dropdown list and the column validation tooltip are contained. The former is contained in the default overlay outlet, which is not a descendant of the component host, nor the grid, while the latter is contained in the grid’s overlay outlet. This causes the list to stack over the tooltip.
To address this, my suggestion is to create a custom overlaySettings object with the outlet property assigned to the grid instance’s own outlet:
@ViewChild('grid1', { read: IgxGridComponent, static: true }) public grid1: IgxGridComponent;
public ngAfterViewInit() { this.overlaySettings = { outlet: this.grid1.outlet, }; }
and assign it to the igx-combo’s overlaySettings property:
<ng-template igxCellEditor let-cell="cell" let-value> <igx-combo type="line" [(ngModel)]="cell.editValue" [data]="locations" width="220px" [igxFocus]="true" [overlaySettings]="overlaySettings" ></igx-combo> </ng-template>
Here is a StackBlitz sample demonstrating this suggestion for the “Available At” column. Please, test it by clearing any of the records value for this column and observing the error tooltip. Please, note that the overlay content stacking in this case will depend on the order of appearance of the elements. The behavior is such that once the list is opened whilst the tooltip is displayed, the latter gets immediately closed, so I believe this should not be an issue.
In conclusion, please, check out the referenced sample and let me know if you need any further assistance on the matter.
Best regards, Bozhidara Pachilova Associate Software Developer
Thanks for getting back to me, that's the perfect solution to the problem.
The only issue I have now is that the positioning error message seems to be centered at the exclamation mark, which doesn't work for this particular cell (it's positioned at the last cell and the message can be quite long so goes off the screen).
Ideally, this error message box would be anchored by its right-hand side so it lines up with the right side of the cell.
I was able to find a kind of solution to this while using a workaround to the previous problem, where I repositioned the message using css, but that was using hard-coded values, meaning that this didn't look so good for shorter messages.
Do you have a proposed solution? I thought about using positioning strategies but I'm not sure where to apply this.
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.
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.
Good to hear the issues are resolved.
Thank you for using Infragistics components!
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