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
gan kh
155
how to style both igx-simple-combo, autocomplete to basic look-and-feel of html select
posted

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.

Parents Reply
  • 800
    Offline posted 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

Children