Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Adam Drew
220
Combo Box validation
posted

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!

Parents
No Data
Reply
  • 2680
    Verified Answer
    Offline posted

    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

Children