how to style both igx-simple-combo, autocomplete to basic look-and-feel of html select

155

gan kh posted 3 months ago

Dear Sir/Mdm/Ms:

If i want to use both html select and igx-simple-combo (which behaves like auto-complete) and autocomplete (https://ko.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.

Top Replies

800

Offline Riva Ivanova posted 3 months ago in reply to gan kh +1 verified
Hello, 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...view reply »

800

Offline Riva Ivanova posted 2 months ago in reply to gan kh

Hello,

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.

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

Sincerely,
Riva Ivanova
Software Developer
Cancel
Reply

Cancel

155

Offline gan kh posted 2 months ago in reply to Riva Ivanova

Hello:

Thanks for the help.

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://ko.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://ko.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;
}

Object.assign(dropdown.element.style, {

width: `420px`,

height: `200px`,

});

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();
  }

800

Offline Riva Ivanova posted 3 months ago in reply to gan kh
Hello,

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(), };

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
Cancel
Reply

Cancel
155

Offline gan kh posted 3 months ago in reply to Riva Ivanova
Hello:

Thanks for the help.

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>
Cancel
Reply

Cancel
800

Offline Riva Ivanova posted 3 months ago in reply to gan kh
Hello,

Thank you for following up!

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
Cancel
Reply

Cancel