Open Closed

Top-Menu Display Issue #6573

User avatar
0
hanntd created
  • ABP Framework version: v8.0.2
  • UI Type: Blazor WASM
  • Database System: EF Core (PostgreSQL) Hi ABP Team,

I have an issue of display top-menu when switching from side-menu to top-menu:

  • The logo and App Name were are shown overlapping each other.
  • List of menu can't show in full page we must roll to the right side to see hidden menu
  • Other additional icons such as icon of Chat module can't display correctly

In additional, how can I setup the footer component will be auto hide when user roll down the page: Thanks, Dharma

Go to accepted answer
13 Answer(s)
  • User Avatar
    0
    ageiter created

    Hi,

    I'm adding another bug in the TopMenu layout:

    The display of the active page in the submenu does not work properly. If you select a page from a submenu, it remains active / selected until you reload the page (with F5).

    To reproduce:

    1. select an item in the submenu
    2. check whether this page is displayed as active in the submenu
    3. select another item in the same submenu (or in a different one)
    4. check which page is now displayed as active

    Behavior in LeptonX 3.0.2: Previous menu item is displayed as active, only after refreshing the page is it correct.

    Expected result: The currently selected page is marked active

    If I remember correctly, this bug has existed for a while...

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    I am not exactly sure but I will give you some workaround. Please try to add this css in main.css under Blazor project

    div.lpx-brand-name {
    left: 200px;
    top: 15px;
}

div.lpx-header-bottom ul.lpx-nav-menu
{
   justify-content: normal;
   overflow-x:scroll;
}

    It will solve menu scrolling and Menu banding issue, which results like

    thanks

  • User Avatar
    0
    hanntd created

    Thanks, now I can fix the issue of rolling top-menu and brand-logo but the icon of Chat module is disappear, I still can lick on that position to show Chat form but icon of Chat on Toolbar cannot see. I have added one bell icon on the toolbar follow this guide: https://docs.abp.io/en/abp/latest/UI/Blazor/Toolbars

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    I have checked for chat module at my end it seem like below

    I think you should try to change the value of padding-y for .btn and then check the position of chat icon and then accordingly try to fix it with the help of css.

    thanks,

  • User Avatar
    0
    hanntd created

    Thanks for your support, I have another question related to the UI: When I added a form in ABP Module (Balzor UI) when opening the form we will the blue progress bar at the top during form loading until the form is loaded completely. But after built module into nuget package and included into the main application (generate as application with Blazor UI using ABP suite), the progress bar is disappeared during form loading. How we can show the progress as it shown when opening in module? Opening from module:

    Opening after include module package to Main Application:

    Thanks, Dharma

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hi ,

    I am unable to reproduce this issue. Please refer this https://docs.abp.io/en/abp/latest/UI/Blazor/Page-Progress .

    Thanks,

  • User Avatar
    0
    ageiter created

    Hi,

    I'm adding another bug in the TopMenu layout:

    The display of the active page in the submenu does not work properly. If you select a page from a submenu, it remains active / selected until you reload the page (with F5).

    To reproduce:

    1. select an item in the submenu
    2. check whether this page is displayed as active in the submenu
    3. select another item in the same submenu (or in a different one)
    4. check which page is now displayed as active

    Behavior in LeptonX 3.0.2: Previous menu item is displayed as active, only after refreshing the page is it correct.

    Expected result: The currently selected page is marked active

    If I remember correctly, this bug has existed for a while...

    What about this bug? Can you reproduce and fix it?

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    Sorry, but I am unable to reproduce the issue, it's working fine at my end.

    You may check in this video

    When we hover on any menu item then its color get changed to Pink ; even if we don't select that menu item.

    thanks

  • User Avatar
    0
    ageiter created

    I have created a new project with the ABP Suite (version 8.0.2) and set the theme to TopMenu. Then I created two videos to show the problem.

    1. video shows the problem described above. As soon as the page is reloaded (refresh with F5), the selection in the menu remains, even if you select another menu item.

    2. video shows a problem that I already mentioned in other tickets a long time ago and unfortunately is still not fixed. Since this fits together, I'll mention it again here. When restarting the application, the menu does not work correctly until you refresh the page for the first time.

  • User Avatar
    0
    enisn created
    Support Team .NET Developer

    Hi,

    Confirmed that menu overflow it a bug of leptonx and we'll work on it.

    For rest of the features; Have you updated your blazor wasm bundles after switching between layouts with abp bundle command?

    Try updating them cleanly, run abp clean first and then execute abp bundle command inside your blazor wasm project.

  • User Avatar
    0
    ageiter created

    For rest of the features; Have you updated your blazor wasm bundles after switching between layouts with abp bundle command?

    Try updating them cleanly, run abp clean first and then execute abp bundle command inside your blazor wasm project.

    Do you mean the thing with the menu? I use Blazor Server... Is that necessary there too?

  • User Avatar
    0
    thanhlg created

    Hi ,

    I am unable to reproduce this issue. Please refer this https://docs.abp.io/en/abp/latest/UI/Blazor/Page-Progress .

    Thanks,

    I have tried following the documentation, but it doesn't work.

  • User Avatar
    0
    ageiter created

    I have created a new project with the ABP Suite (version 8.0.2) and set the theme to TopMenu. Then I created two videos to show the problem.

    1. video shows the problem described above. As soon as the page is reloaded (refresh with F5), the selection in the menu remains, even if you select another menu item.

    2. video shows a problem that I already mentioned in other tickets a long time ago and unfortunately is still not fixed. Since this fits together, I'll mention it again here. When restarting the application, the menu does not work correctly until you refresh the page for the first time.

    Any idea about this bug? @enisn did you write the one with the abp bundle about this bug or the one with the progress bar?

Assignee
User avatar Anjali_Musmade
Labels
lepton-x
Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11