Option-Label Interfering with DDL

[Max]

Hello, 

I am trying to use a DDL (This happens to both HTML Helper & Tag Helper) With a 'Option-Label'. however, every time this is applied it causes the DDL to deformat. Please see the attached pictures. Do you have any idea why this is happening? 

[Dimitar]

Hello Max,

The described behavior is related to an intended change in the rendering behavior of the DropDownList's option label. This is implemented in 2015 Q1 in order to provide support for grouping and virtualization scenarios. The actual change moves the optionLabel outside of the items list and places it as a static header. This is described in greater details in the following section of the documentation:

• 2015 Q1 Breaking Changes.

Regards,
Dimitar
Progress Telerik

[Max]

Please Look at the screenshots attached, more specifically the bottom of the DDL. You can see that because of the Option-Label the List Items escape the dropdown.

[Dimitar]

Hello Max,

I was not able to replicate the described behavior with the option label. In the Cascading DropDownLists Demo for ASP.NET Core, the first component has OptionLabel() set and the popup list is rendered correctly.

May I ask you to verify if the above demo is working correctly on your end? If this is not the case, then could you provide additional details so that I am able to continue investigating the issue?

Regards,
Dimitar
Progress Telerik

[Max]

Hello, 

I copy & pasted the code from the demo and i am still experiencing the styling issue.

[Dimitar]

Hello Max,

I managed to reproduce the issue that you are experiencing. The issue is actually caused by referencing Bootstrap 3 along with the Default Sass theme. In general, due to the box-sizing differences between the two, a small patch can be included in order to allow them working together:

• Bootstrap 3 integration.

I am attaching a simple project, where the discussed issue is resolved. I would suggest inspecting the _Layout.cshtml page where the client-side resources are included in the required order along with the above-mentioned patch.

Regards,
Dimitar
Progress Telerik

[Max]

Hello Dimitar,

I am glad you could replicate are problem we are having, however, we are not referencing bootstrap 3 anywhere in the project. We are only referencing Bootstrap v4.1.1, Can you try to replicate are issue with this version.

 

Thanks.

 

[Misho]

Hello,

The same approach need to be applied for Bootstrap v4. Here is a screenshot of the result on my end:  http://take.ms/DbNQb
The modification in the _Layout.cshtml file is in accordance with the approach in the Bootstrap Integration article.
I'm attaching the page for your convenience.

Best Regards,
Misho
Progress Telerik