Popup is out of dropdownlist container

[Dan]

Hi I have a problem regarding the dropdownlist (see DropDownList.png). The items of the list is outside of the popup border.

I am using a custom theme generated by someone else and I have no idea where to start.

I have a project but can not attach it. How can I place the project here?

 

[Nencho]

Hello Dan,

I noticed that you had submitted five tickets on the same matter, which is why, I would like to ask you to continue the conversation in this one. 

Indeed, it seems from the attached image, that the issue is caused by some custom styles, that came from the theme in question. That  being said, we would need to locally replicate and revise the issue, in order to pin down the problematic styles. Indeed, attaching projects in our forums in not allowed. Hence, you can submit a support ticket, along with a runnable sample attached, so we could revise the project and provide you with a suggestion for implementation.

Regards,
Nencho
Progress Telerik

[Dan]

Hi Nencho,

Sorry about that but my company network was informing me that the forum post has failed, that is why I was trying again and again. Also I see that the one where I say that I found out that the problem was fixed in a newer version is also gone.

[Dan]

Hi,

Unfortunally after updating to the latest version did not solve the issue on the Asp.Net CORE project. However when I wanted to generate a reproduction project on kendo-ui it was solved in the latest version. I think that my problem might be related to the fact that the opening of the popup selection takes some time.

[Nencho]

Hello Dan,

I have performed a variety of tests at my end, in attempt to replicate the described issue, but to no avail. Therefore, I would like to ask you to demonstrated the exact implementation of the widget that you have at your end, in order to narrow down the possibilities that might caused the issue.

In addition, please specify the approximate amount of items that the widgets is bound to.

Lastly, I would like to emphasize on the fact that it would be best, if you could submit a runnable example, where the issue resides (even a part of you real-lie application) in a support ticket.

Regards,
Nencho
Progress Telerik

[Dan]

Hi Nencho,

I finally managed to get to investigate this and I think I found the problem.

The theme we are using is based on the npm dependency kendo-theme-default. The theme has in the file scss\popup\_layout.scss the following code:

// Filter
    .k-list-filter {
        ...
        height: add-three(4 * $padding-y, $form-line-height-em, 2 * $button-padding-y);
....

The height is not set on any demo on the telerik site (if I add this the issue can be reproduced).

Isn't the theme at the address https://github.com/telerik/kendo-theme-default/ maintained? Is it not recommended to use the theme from git?

[Nencho]

Hello Dan,

We've moved the kendo-theme-default/ to https://github.com/telerik/kendo-themes/ and we aim to maintain this repo. As for the style in question, it is now transformed to min-height as demonstrated below:

https://github.com/telerik/kendo-themes/blob/develop/packages/default/scss/popup/_layout.scss#L155

Hope this would help.

Regards,
Nencho
Progress Telerik

[Dan]

Hi Nencho,

So I have in the package.json this

"devDependencies": {
    "@progress/kendo-theme-bootstrap": "2.11.0"
  },

with what package should I replace it with?

[Nencho]

Hello Dan,

In order to correctly refer the version,  you can use ^. Hence, you will use any major version -2, regardless of the minor versioning:

"devDependencies": {
   "@progress/kendo-theme-bootstrap": "^2.0.0"
 },

Hope this would help.

Regards,
Nencho
Progress Telerik