"k-drawer-item" elements are missing the " k-level-0" class

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 05 Aug 2024 13:31 by ADMIN

Release 6.1.0

Brian

Created on: 20 May 2024 15:27

Category: Drawer

Type: Bug Report

"k-drawer-item" elements are missing the " k-level-0" class

According to the Rendering Changes in 6.0.0 article, "k-level-0" CSS class should be added to the "li.k-drawer-item" element. This class, however, is never added.

3 comments

Brian

Posted on: 18 Jun 2024 12:58

Thank you for another excellent response, Nadezhda. I see now what you mean about Blazor Coffee and the Admin template taking control away from the internal component's rendering. I'm new to Blazor as well as Telerik Blazor-UI (obvi ), so the ramifications of what the template was actually doing escaped me.

Thanks again, especially for your patience, and it's good to know it is indeed fixed.

~Brian

ADMIN

Nadezhda Tacheva

Posted on: 18 Jun 2024 12:35

Hi Brian,

I am stepping in to provide some more clarity on the matter as I am the one who opened the current post on your behalf. Please see my comments on the relevant points as follows:

"k-drawer-items" element - <div> or <ul>

I confirm that in UI for Blazor 6.0.0 the div.k-drawer-items element was removed and the k-drawer-items CSS class was moved to the child ul element.

The easiest way to validate that is to inspect the rendering of the Drawer in our live demos. I'm also pasting a screenshot of the result for visibility:

===

Different rendering in the Admin Template

As far as I understand, you are getting a different result when creating a sample app from the templates that the Visual Studio Wizard provides and more specifically, the Admin template.

I confirm this is indeed true and let me provide details on why this happens.

The Drawer instance in the Admin template uses a Template. It overrides the whole Drawer rendering and the component no longer uses its default rendering. Currently, the custom code in the Drawer Template indeed contains a <div class="k-drawer-items"> element and I believe this causes the confusion. Please note that this does not depend on the Drawer but rather on the custom declaration inside the Template.

To fix this on your side, you may remove the <div> element and add the "k-drawer-items" to the <ul> element.

I am attaching a demo app created from the Admin template for visibility. The Drawer can be found in the MainLayout.razor file.

I will check with the Visual Studio team whether we can update the template, so we can avoid such misunderstandings and non-working styles. As for the Blazing Coffee app, I see this has already been updated.

===

"k-level-0" class applied to the li items

The "k-level-0" CSS class was indeed not added to the li items of the Drawer. This is the issue the current bug report targets.

This has already been fixed internally and that's why you see the "Completed" label. However, the fix will be released in Q3 which will happen in August (see the blue label indicating the release). This is why you do not yet see the "k-level-0" class.

Regards,
Nadezhda Tacheva
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!

Attached Files:

drawertestapp.zip

Brian

Posted on: 11 Jun 2024 13:32

This feedback was actually copied over by Telerik staff from a forum post, and i apologize if the wording of it was not complete enough to point out the issue. In the forum post, i pointed out that the k-drawer-items are ending up on the <div> and not the <ul> and so the drawer doesn't collapse correctly. And in addition i mentioned that the documentation not only says k-drawer-items is now moved to the ul, but that k-level-0 is being applied to the first li. Both are not actually NOT happening.

I'm just posting here to let you know that whatever was supposed to apply as a recent fix for this, does not appear to have done so. All you need to do to reproduce it is to make a new 6.02 Blazor Server 7 project and choose the Admin template. Collapse the drawer and you'll instantly see what i mean ( but i attached screen snips for you as well ).

As you'll see, the class="k-drawer-items" is on the wrong element ( the <div> ), and so the drawer collapses incorrectly. If you move it to the <ul>, as the new 6.0 changes document says it should now be on the ul and not the div, it collapses correctly.

The k-level-0 class also doesn't get applied to the first li, either, which is not a showstopper, but just mentioning because the documentation says it should. But that class doesn't exist anymore in the bootstrap-main.css as of 6.0

Hope this helps. The k-level-0 issue is inconsequential but the misplaced k-drawer-items and incorrectly collapsing drawer could confuse folks in your drawer demos or in the samples that use it, like Blazor Coffee and the Admin project template.

Attached Files: