Hidden Breadcrumbs

[Tim]

I have a breadcrumb control with 4 items, but the 2nd item is not shown (set to display: none). I saw in another forum post that some items will not be displayed if there is not enough room but that's not the case here. It's inside <ul class="navbar-nav flex-grow-1">

Also, I noticed that press F12 to open developer tools causes one of the items to disappear. Closing developer tools does not bring it back.

How can I ensure that all breadcrumb items are displayed?

Thanks

[Tim]

I should have mentioned that I recently upgraded from 2023.1.425 to 2023.3.1114 to resolve an issue with multiselect. The 2nd item is hidden in both versions.

[Mihaela]

Hello Tim,

Would you please ensure that the ShowText() option is not disabled for the second item (Its default value is "false" for the RootItem and "true" for the Item)?

Also, I am attaching a runnable sample that contains a basic Breadcrumb component with 4 items. Would you please modify it based on your setup and send it back in the thread to review it?

Thank you for your cooperation.

Best,

Mihaela

[Tim]

Hi Mihaela

I am using the TagHelper which does not have the ShowText() option.

Here is the modified sample.

Thanks for your help,

Tim

[Mihaela]

Hi Tim,

Thank you for sharing the sample app that demonstrates the issue.

I have tested it, and noticed that during the window resizing, when the screen size is less than 576px, the hidden Breadcrumb items appear. Also, when I remove the classes of the <nav> and the <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> elements, all Breadcrumb items are rendered as expected. It indicates to me that the Bootstrap's responsive behavior is affecting the visibility of the Breadcrumb items - it adds dynamically "display: none" as an inline style to the items:

In addition, since the Breadcrumb is a <nav> element that is nested inside a <nav> element with Bootstrap classes, this nesting might interfere with this behavior.

With that being said, I would suggest overriding the Breadcrumb item's anchor tag style to ensure that all items will be always displayed:

<style>
        .k-breadcrumb-item a {
            display: block !important;
        }
</style>

 

Regards,
Mihaela
Progress Telerik

[Tim]

That works. Thank you for your help!