search

IgniteUI / ignite-ui

Ignite UI for jQuery by Infragistics
https://bit.ly/2kuu1fT
Other
477 stars 83 forks source link

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

Closed norikois closed 1 year ago

norikois commented 2 years ago

Description

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

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. image

Expected result

The whole text is displayed.

Attachments

igCombo.zip

Lipata commented 2 years ago

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 commented 2 years ago

@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.