Dear Sir/Mdm/Ms:
If i want to use both html select and igx-simple-combo (which behaves like auto-complete) and autocomplete (https://pt-br.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete) side-by-side, how to style both igx-simple-combo, autocomplete to basic look-and-feel of html select from previous example here:
https://stackblitz.com/edit/xusebhfz-n7f4xj4n?file=src%2Fapp%2Fgrid%2Fgrid-sample-right-pinning%2Fgrid-right-pinning.component.html
was resorted to do something like this to make it works:
<igx-simple-combo [id]="getXXXId(cell)" [data]="XXXlist" [class]="'my-simple-combo2'" (selectionChanging)="XXXChanging($event, cell)" placeholder="Select XXX" [ngModel]="getXXXFromCell(cell).XXXName_YYY_ZZZ" [valueKey]="'XXXName_YYY_ZZZ'" [displayKey]="'XXXName'"> <ng-template igxComboClearIcon></ng-template> </igx-simple-combo>
:host ::ng-deep .igx-input-group--box .igx-input-group__bundle{ height: 25px !important; } :host ::ng-deep igx-input-group > div.igx-input-group__wrapper > div{ background-color: white; } :host ::ng-deep igx-input-group > div.igx-input-group__wrapper > div > div.igx-input-group__bundle-end > igx-suffix.igx-combo__toggle-button{ background-color: white; } :host ::ng-deep .igx-input-group__notch:empty+.igx-input-group__bundle-main .igx-input-group__input { height: 25px !important; }
Any better way?
Thanks in advance.
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
Hello:
Thanks for the help.
What i am trying to do is a editable-dropdown, which is similar to autocomplete.
I do notice the igx-simple-combo will lose its value, once i try to click on it and onBlur(), eg: use this in athletesData
CountryName: 'California',
Is there anyway to retain it after onBlur()?
Or i have to use https://pt-br.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete ?
anyway to style it identical to what you did on igx-simple-combo previously?
I have been looking into your additional questions, and what I can say is that this behavior is by default, as the IgxSimpleCombo’s input is used both for filtering the values and displaying the selection. However, if there is no valid selection, blurring the combo’s input will clear the entered value, and this is the expected behavior.
For styling the autocomplete, the approach is similar to the IgxSimpleCombo in terms of setting the height. To change the colors, you should wrap the igx-drop-down-item components in a div element and set a custom class. Then, for this class, you should include the custom dropdown theme.
I believe that you will find the following topics quite helpful in customizing the IgxAutoComplete.
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.
I have been looking into your additional question, and what I can suggest is setting the max-height property of the drop-down__scroll-container class, which is set on the div element that wraps the drop-down-items.
<igx-drop-down #dropdown> <div class="drop-down__scroll-container"> <igx-drop-down-item></igx-drop-down-item> </div> </igx-drop-down>
.drop-down__scroll-container { max-height: 300px; @include css-vars($custom-drop-down-theme); }
Here can be found a modified sample.
Next question is: how to control the max-height of the dropdown content if i have a long list?
public cities: any[] = [ { name: 'New York', code: 'NY' }, { name: 'Rome', code: 'RM' }, { name: 'Somewhere in Long Island of New York', code: 'LI' }, { name: 'London', code: 'LDN' }, { name: 'New Orleans', code: 'NO' }, { name: 'Istanbul', code: 'IST' }, { name: 'Paris', code: 'PRS' }, { name: 'New Jersey', code: 'NJ' }, { name: 'New York1', code: 'NY' }, { name: 'New York2', code: 'NY' }, { name: 'New York3', code: 'NY' }, { name: 'New York4', code: 'NY' }, { name: 'New York5', code: 'NY' }, { name: 'New York6', code: 'NY' }, { name: 'New York7', code: 'NY' }, { name: 'New York8', code: 'NY' }, { name: 'New York9', code: 'NY' }, { name: 'New York10', code: 'NY' }, { name: 'New York11', code: 'NY' }, { name: 'New York12', code: 'NY' }, { name: 'New York13', code: 'NY' }, { name: 'New York14', code: 'NY' }, { name: 'New York15', code: 'NY' }, { name: 'New York16', code: 'NY' }, { name: 'New York17', code: 'NY' }, { name: 'New York18', code: 'NY' }, { name: 'New York19', code: 'NY' }, { name: 'New York20', code: 'NY' }, ];
Tried all these, it does not work:
1) [maxHeight]="200"
(https://pt-br.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxDropDownComponent.html#maxheight)
<igx-drop-down #dropdown [maxHeight]="200" > <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>
2) no height option in theme
(https://pt-br.infragistics.com/products/ignite-ui-angular/docs/sass/latest/index.html#function-drop-down-theme)
3) css
:host::ng-deep .igx-drop-down__list{ height: 150px; }
4)
private customizeDropdownContentWidth( inputGroup: IgxInputGroupComponent, dropdown: IgxDropDownComponent ) { const inputGroupElement = inputGroup.element.nativeElement; const settings: OverlaySettings = { target: inputGroupElement, closeOnOutsideClick: false, modal: false, positionStrategy: new ConnectedPositioningStrategy(), }; Object.assign(dropdown.element.style, { //width: `${inputGroupElement.clientWidth}px`, width: `420px`, height: `200px`, }); dropdown.collapsed ? dropdown.open(settings) : dropdown.close(); }
Thank you for following up!
After an investigation, what I can say is that you are correct, and a change in the drop-down behavior has been made in version 18.2.x and is valid for the newer versions as well.
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(), };
Please test it on your side and let me know if you need any further assistance regarding this matter.
I do notice the problem, where if you are using both angular & Infragistics v19, then your code works.
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.