Hello,

I have been looking into your question, and what I can suggest is referring to the IgxSimpleCombo styling section here and the IgxAutocomplete styling section here. As mentioned in both sections, the two components internally use the IgxInputGroup and the IgxDropDown, so in order to properly style these parts, you should use the input-group-theme and drop-down-theme functions.

Additionally, if you wish to change the size of the combo and autocomplete as well, this can be achieved by using the –ig-size CSS custom property as mentioned in our Size topic here.

igx-simple-combo {
    --ig-size: var(--ig-size-small);
    OR
    --ig-size: var(--ig-size-medium);
    OR
    --ig-size: var(--ig-size-large);
}

However, these options are predefined, and setting a custom height is currently not supported since internal styling is applied based on the provided –ig-size option. This internal styling refers to the styling of the toggle icon, clear icon, and the internal parts of the IgxInputGroup component.

Nevertheless, a possible approach in order to provide custom height is setting the --ig-size CSS variable as demonstrated above and setting the --igx-input-group-size CSS variable.

For example:

igx-simple-combo {
    --ig-size: var(--ig-size-small);
    --igx-input-group-size: 30px;
}

Lastly, please note that since the combo and autocomplete use the overlay service, and in order to style the dropdown, you should set the overlaySettings.outlet property as mentioned in the Combo styling section and demonstrated in both samples.

For example:

<igx-simple-combo
    …
    [overlaySettings]="{ outlet: elem }"
>
</igx-simple-combo>

constructor(public elem: ElementRef) { }

Here can be found a simplified example demonstrating how the combo can be customized.

Please let me know if you need any further assistance regarding this matter.

Sincerely,
Riva Ivanova
Software Developer

CountryName: 'California',

   Or i have to use https://ko.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete ?

  anyway to style it identical to what you did on igx-simple-combo previously?

Using the Angular Input Group

Drop Down Styling

Here can be found a modified sample with a column that includes an IgxInputGroup with IgxAutoComplete.

Let me know if you need any further information on the matter.

Sincerely,
Riva Ivanova
Software Developer

<ng-template igxCell let-cell="cell">
    <igx-input-group [type]="'border'" #inputGroup >
        <input
            igxInput
            name="town"
            type="text"
            [igxAutocomplete]="dropdown"
            [(ngModel)]="cell.value"
        />
        <igx-suffix class="igx-combo__toggle-button" (click)="iconClick(inputGroup, dropdown)">
            <igx-icon class="material-icons igx-icon" aria-hidden="true">
                {{ dropdown.collapsed ? 'expand_more' : 'expand_less' }}
            </igx-icon>
        </igx-suffix>
    </igx-input-group>
    <igx-drop-down #dropdown>
        <div class="drop-down__scroll-container">
            @for (town of cities | startsWith:cell.value; track town) {
                <igx-drop-down-item [value]="town.name" style="height: 28px">
                    {{ town.name }}
                </igx-drop-down-item>
            }
        </div>
    </igx-drop-down>
</ng-template>

public iconClick(
    inputGroup: IgxInputGroupComponent,
    dropdown: IgxDropDownComponent
) {
    const inputGroupElement = inputGroup.element.nativeElement;
    const settings: OverlaySettings = {
        target: inputGroupElement,
        closeOnOutsideClick: false,
    };
    Object.assign(dropdown.element.style, {
        width: `${inputGroupElement.clientWidth}px`,
    });
    dropdown.collapsed ? dropdown.open(settings) : dropdown.close();
}

Lastly, since the dropdown is displayed inside an overlay element via our overlay service, I recommend referring to our Overlay topic, as well as the subtopics for further information on how to configure the settings, position, and style the element, etc.

Please test this approach on your side and let me know if you need any further assistance regarding this matter.

Sincerely,
Riva Ivanova
Software Developer

More information about the change can be found in the respective GitHub issue here.

Suppose you require using an older version that does not have the provided fix, I can suggest configuring the overlay settings like the following:

const settings: OverlaySettings = {
    target: inputGroupElement,
    closeOnOutsideClick: false,
    modal: false,
    positionStrategy: new ConnectedPositioningStrategy(),
};

Here can be found a modified sample.

Please test it on your side and let me know if you need any further assistance regarding this matter.

Sincerely,
Riva Ivanova
Software Developer

    If i run in angular & Infragistics v17 (https://stackblitz.com/edit/xusebhfz-zpybs978?file=package.json), due to other library's constraint, then it won't.

    Think it's either newly introduced in v19? or breaking-change? 

    Adding this, does not help either:

<igx-input-group [type]="'border'" #inputGroup  [igxToggleAction]="dropdown">
...
</igx-input-group>

Here is a modified version of the previous StackBlitz sample that demonstrates my suggestion.

Please note that this or similar behaviors can be experienced if the open method is called without the overlaySettings parameter or if the overlay settings are not properly configured.

Regarding your question, in order for the dropdown to be displayed, the overlay service is used internally, so it is best to use the service to open/close the dropdown. Otherwise, there might be unexpected behaviors.

Additionally, another approach to toggle the dropdown is to use the igxToggleAction directive, as mentioned in our Dropdown topic here. Please note that the igxToggleAction directive should be set on the IgxInputGroup component in order for the dropdown to appear right below it.

<igx-input-group [type]="'border'" #inputGroup [igxToggleAction]="dropdown">
    …
</igx-input-group>

<igx-drop-down #dropdown>
    …
</igx-drop-down>

However, in this scenario, the dropdown can be opened/closed when clicking on any part of the input, not only the suffix, so additional configuration may be required in order to prevent the click event of the input element that is inside the IgxInputGroup.

Nevertheless, I suggest using the open/close methods or the toggle method of the IgxDropDown.

Let me know if you need any further information on the matter.

Sincerely,
Riva Ivanova
Software Developer