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!
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.
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