Igx-Combo - itemsHeight?

[mddifilippo89]

Question

How do you set the height of the igx-combo?

None of this CSS works. Is the displayDensity causing this to not be overriden?

.combo {
margin: 8px;
width: 430px;
}

.igx-combo {
height: 500px;
}

.igx-input-group--box igx-input-group__bundle {
height: 500px;
}

[RivaIvanova]

Hi @mddifilippo89,

I have been looking into your question, however, after observing the provided css I need to ask for some additional information. By “set the height of the igx-combo” do you refer to the height of the IgxCombo dropdown or the height of the IgxCombo input where the values are displayed after selection?

I am asking this question as the last css refers to the IgxCombo input and when a component is using an Emulated ViewEncapsulation this encapsulation should be penetrated using ::ng-deep.

For example, the following code will penetrate the encapsulation and set the IgxCombo input to 100px:

:host::ng-deep {
  .igx-input-group--box .igx-input-group__bundle {
    height: 100px;
  }
}

However, setting the height of the IgxCombo dropdown could be achieved by using the itemsMaxHeight property.

Here could be found a small sample demonstrating the abovementioned approaches.