[igCombo] The lower part of each items in combo dropdown is not fully displayed when bootstrap is loaded.

[norikois]

Description

The lower part of each items in combo dropdown is not fully displayed when bootstrap is loaded.

• ignite-ui version: 21.1
• browser: Chrome, Firefox, Edge

Steps to reproduce

1. Open the attached sample in a browser.
2. Click the dropdown button to open the dropdown. -> Observe each item in the dropdown.

Result

The lower part is not displayed.

Expected result

The whole text is displayed.

Attachments

igCombo.zip

[Lipata]

Hi, @norikois. This is because bootstrap is adding box-sizing: border-box. In the sample you can add:

<style>
   .ui-igcombo-listitem {
	box-sizing: content-box;
   }
</style>

@desig9stein do you think that we need to overwrite this bootstrap rule in our themes?

[desig9stein]

@Lipata I took a quick look and In my opinion, the problem is not the box-sizing. There is a hardcoded height on the list item. I don't know why we need that height at all. You can check what will happen with all themes if that height is gone. And if there is a problem override it only for the bootstrap theme, you can set it to height:auto.