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

    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

Children