Open Closed

ABP LeptonX vertical menu missing scrolling #3992


2
christophe.baille created
  • ABP Framework version: v6.1
  • UI type: Blazor
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no

A ticket already exists for this issue:

https://support.abp.io/QA/Questions/3524/ABP-LeptonX-vertical-menu-missing-scrolling

But nobody reply when I asked, maybe it is because I have the issue on Blazor server and not MVC (the ticket and the github link is about Mvc)

Anyway, I created a new solution this morning with the "new" ABP 6.1 which has LeptonX 1 (not rc anymore). I then added several entities to have my menu full, but the menu still can not scroll down.

Any way to fix it please? I updated a project from us with LeptonX, but because of this problem, I can not update our main branch...

Thanks


20 Answer(s)
  • 0
    liangshiwei created
    Support Team

    Hi,

    I will check it

  • 1
    christophe.baille created

    Thanks

    I noticed that the issue is on the mobile view as well

  • 0
    liangshiwei created
    Support Team

    Hi,

    We will fix the problem, and your ticket refunded.

  • 0
    enisn created
    Support Team

    Hi We've solved the problem, it'll be released in the next patch version of LeptonX. But you can use the following component in your project to overcome the problem as a workaround.

    • Create a razor page in your blazor application. Let say it's MyMainHeader.razor
    @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.Navigation
    @using Volo.Abp.DependencyInjection;
    @using Volo.Abp.LeptonX.Shared.Localization
    @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.MainHeader
    
    @inherits MainHeader
    @attribute [ExposeServices(typeof(MainHeader))]
    @attribute [Dependency(ReplaceServices = true)]
    @{
    	LocalizationResource = typeof(LeptonXResource);
    }
    
    <div class="lpx-sidebar-container">
    	<div class="lpx-sidebar" id="lpx-sidebar">
    		<nav class="lpx-nav">
    			<div class="lpx-logo-container">
    				<MainHeaderBranding />
    				<i class="lpx-icon bi bi-filter-left menu-collapse-icon hidden-in-hover-trigger"
    				   aria-hidden="true"
    				   data-lpx-toggle="sidebar">
    				</i>
    			</div>
    
    			<div class="lpx-menu-filter hidden-in-hover-trigger" data-lpx-menu-filter="sidebar">
    				<i class="lpx-icon bi bi-filter menu-filter-icon" aria-hidden="true"></i>
    				<input class="menu-filter-input hidden-in-hover-trigger" type="text" placeholder="@L["FilterMenu"]" />
    				<span class="menu-filter-clear hidden">
    					<i class="lpx-icon bi bi-x clear-icon" aria-hidden="true"></i>
    				</span>
    			</div>
    			<ul class="lpx-nav-menu" id="desktop-sidebar">
    				<MainMenu />
    			</ul>
    		</nav>
    	</div>
    </div>
    

    Then you'll see it'll start to be scrolled

  • 0
    david.hurtado created

    Hi @enisn I made the component that you said and nothing happens. I still get the error. Another error is in mobile when the main menu have submenu, don't appear in the bottom of the app.

  • 0
    christophe.baille created

    Thanks, it works well with this component.

    About the menu not scrolling on the mobile (it's another component), can you have a look from here or should I open a new ticket?

  • 0
    enisn created
    Support Team

    Sorry, I couldn't reproduce this issue on mobile navbar. Can you provide some steps to reproduce it?

  • 0
    christophe.baille created

    On the bottom menu, it doesn't scroll from left to right.

  • 0
    malik.masis created
    Support Team

    Hi,

    I've discussed this with the team. The team doesn't advise putting more than 5 buttons (1 hamburger and 4 other buttons). Even if you'd like to add you should be attention to fit the screen.

    Regards

  • 0
    christophe.baille created

    I see, so how should I make my menu items not appears on the bottom menu and the burger while on mobile view? I do not mind to go through the burger to reach my menu items, but by default it show like this so it should be fixed or maybe remove from the main menu what is already on the burger if not able to make it scroll

  • 0
    enisn created
    Support Team

    Can you try the following option?

    Configure<LeptonXThemeBlazorOptions>(options =>
    {
        // This will render only first 2 items
        options.MobileMenuSelector = (menuItems) => menuItems.Take(2);      
    });
    
  • 0
    christophe.baille created

    I finally edited "MainMenuItem" component and removed all items. There is no point to show only 2.

    Hopefully, someday you will find it useful to fix it...

    There are many other issues on this menu anyway (some were not here before), so it could be good that someone test it properly:

    I fixed menu icons missing from admin (user) menu by removing bi on the icon class

  • 0
    enisn created
    Support Team

    If you share how you override the component, can you share the code? ıt seems some of styles are missing in the screenshot

  • 0
    christophe.baille created

    On this last example it is a "brand new" project and I do not overwrite anything

  • 0
    enisn created
    Support Team

    there is no horizontal scroll at the moment in the bottom menu currently. It's by design. You can override the component and add horizontal scroll by yourself but unfortunately there is no option for that in the theme

  • 0
    christophe.baille created

    I changed by showing only few elements on the bottom menu.

    How about bugs from the new version with the mobile menu I mentionned in a message before?

    It is transparent so can't read anything, and when we click on one element, the menu do not close automatically

    I need to open a new ticket?

  • 0
    enisn created
    Support Team

    It seems your style css isn't loaded. Did you override any logic about bundling or styles of LeptonX?

  • 0
    christophe.baille created

    No,

    It is a template and I did nothing appart of generating it, not any edit

  • 0
    enisn created
    Support Team

    On the bottom menu, it doesn't scroll from left to right.

    If you add the following CSS into your application you will be able to scroll left to right

    .lpx-mobile-navbar {
        width: 100%;
    }
    .lpx-mobile-nav-tab {
        min-width: 72px;    
        width: auto;
    }
    .lpx-mobile-nav-tabs {
        width: 100%;
        overflow-x: scroll;
        justify-content: start;
    }
    
  • 0
    christophe.baille created

    Thanks but I did gave up for this scroll a while ago as I can use another way.

    How about the issue of the menu whic keep open? Did you had a look?

    Thanks