Scroll Bar Bug on Update to Blazor 19.3.0.47

[Ssekamatte James]

Dear Syncfusion,

I have updated my Syncfusion.Blazor from Version 18.4.0.48 to Version 19.3.0.47 but I am getting an un wanted scroll bar on my system as I have shown you in the images attached and video here  .

I would like to know how this can be fixed.

Thank You

Attachment: ScrollBar_8561a9f4.rar

[Aravinthan Seetharaman]

Hi Ssekamatte, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query in the version 19.3.0.47. We cannot reproduce your reported issue in our end. For your reference we have prepared video demo and sample here. 

 

Video Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Menu_scroll128759723  

 

 

@using Syncfusion.Blazor.Navigations 

 

<div class="mydiv"></div> 

<div style="float:right"> 

    <SfMenu TValue="MenuItem"> 

        <MenuItems> 

            <MenuItem Text="File"> 

                <MenuItems> 

                    <MenuItem Text="Open"></MenuItem> 

                    <MenuItem Text="Save"></MenuItem> 

                    <MenuItem Text="Exit"></MenuItem> 

                </MenuItems> 

            </MenuItem> 

            <MenuItem Text="Edit"> 

                <MenuItems> 

                    <MenuItem Text="Cut"></MenuItem> 

                    <MenuItem Text="Copy"></MenuItem> 

                    <MenuItem Text="Paste"></MenuItem> 

                </MenuItems> 

            </MenuItem> 

            <MenuItem Text="View"> 

                <MenuItems> 

                    <MenuItem Text="Toolbars"></MenuItem> 

                    <MenuItem Text="Zoomr"></MenuItem> 

                    <MenuItem Text="Full Screen"></MenuItem> 

                </MenuItems> 

            </MenuItem> 

            <MenuItem Text="Tools"> 

                <MenuItems> 

                    <MenuItem Text="Spelling & Grammar"></MenuItem> 

                    <MenuItem Text="Customize"></MenuItem> 

                    <MenuItem Text="Options"></MenuItem> 

                </MenuItems> 

            </MenuItem> 

            <MenuItem Text="Go"></MenuItem> 

            <MenuItem Text="Help"></MenuItem> 

        </MenuItems> 

    </SfMenu> 

</div> 

<style> 

    .mydiv{ 

        width:1900px; 

        height:20px; 

        background-color:aquamarine; 

    } 

</style> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Server5.0-2076075502 

 

Please check the above details and if you are still facing issue, please share the below details.  

• If possible, please reproduce the issue in provided sample or share the issue reproducible sample.
• Please share us the MenuBar related code snippet.

Please provide the above requested information, based on that we will check and provide you a better solution quickly.  

  

Regards, 

Aravinthan S 

 

[Ssekamatte James]

Thank You Aravinthan.

However, I am still facing the issue. I have attached my code here in which I am facing the issue under the Utilities Menu.

You realize in your code sample shared with me , the bug still exists. Please check the video recording I have attached here showing how your shared sample code appears with that bottom scrollbar

Please download my project code where I am facing the problem. Thank You.

https://we.tl/t-S8Yg6bXQDe

[Aravinthan Seetharaman]

Hi Ssekamatte, 

 

We have checked your query. We need to validate more on this, and need to ensure more cases regarding this. So, we will update further details on 10^th November 2021. We appreciate your patience until then. 

 

Regards, 

Aravinthan S 

[Ssekamatte James]

Thank You very much.

I will be waiting for an update on 10th November 2021.

[Aravinthan Seetharaman]

Hi Ssekamatte 

 

Thanks for the patience. 

 

We have checked your issue. We can able to replicate your issue in our end, and we need to validate more on this. So, we will update further details on 12^th November 2021. We appreciate your patience until then. 

 

However, we have prepared workaround sample to resolve this issue in your end. Please refer the below code snippet and sample. 

 

 

@using Syncfusion.Blazor.Navigations 

 

<div class="mydiv"> 

    <SfMenu TValue="MenuItem"> 

        <MenuItems> 

            <MenuItem Text="View"> 

                <MenuItems> 

                    <MenuItem Text="Toolbars"></MenuItem> 

                    <MenuItem Text="Zoomr"></MenuItem> 

                    <MenuItem Text="Full Screen"></MenuItem> 

                </MenuItems> 

            </MenuItem> 

            <MenuItem Text="Tools"> 

                <MenuItems> 

                    <MenuItem Text="Spelling & Grammar"></MenuItem> 

                    <MenuItem Text="Customize"></MenuItem> 

                    <MenuItem Text="Options"></MenuItem> 

                </MenuItems> 

            </MenuItem> 

            <MenuItem Text="Go"></MenuItem> 

            <MenuItem Text="Help"></MenuItem> 

        </MenuItems> 

    </SfMenu> 

</div> 

<style> 

    .mydiv { 

        min-width: 100%; 

        background-color: #3498db; 

    } 

    .e-menu-wrapper, .e-menu-container { 

        display: block; 

    } 

</style> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Server5.0-2076075502-416764911  

 

Please check the above details and let us know if you need any assistance on this. 

 

Regards, 

Aravinthan S 

[Ssekamatte James]

Dear Syncfusion, 

Thank you for your previous response and sample you shared. In the shared sample, every thing works perfectly well as I would like my code to also run. 

However, when I copy the same css class shared with me and place it in my code, I still have the problem in my code.

I have pasted the layout page with my code snippet below here of how I have applied your solution but my problem has still persisted.

Thank You

@using RHITES.Data;

@inject UserManagement userManagement;

@using RHITES.Models

<div class="mydiv">

    <AuthorizeView>

        <Authorized>

            <SfMenu Items="@menuItems" TValue="MenuItem" EnableScrolling="true" ShowItemOnClick="true"></SfMenu>

        </Authorized>

        <NotAuthorized>

            @* <SfMenu Items="@menuItems" TValue="MenuItem" EnableScrolling="true" ShowItemOnClick="true"></SfMenu>*@

        </NotAuthorized>

    </AuthorizeView>

</div>

@code {

    public List<MenuItem> menuItems = new List<MenuItem>();

    protected override void OnAfterRender(bool firstRender)

    {

        var isSignedIn = userManagement.IsSignedIn();

        if (isSignedIn)

        {

            bool Administrator = false;

            bool MonitoringEvaluation = false;

            bool DataEntrant = false;

            using (var db = new RHITESContext())

            {

                var data = db.ViewUserManagement.FirstOrDefault(o => o.UserName == userManagement.GetUserName());

                if (data != null)

                {

                    if (data.RoleName.Contains("Administrator"))

                    {

                        Administrator = true;

                    }

                    else if (data.RoleName.Contains("M&E Officer"))

                    {

                        MonitoringEvaluation = true;

                    }

                    else if (data.RoleName.Contains("Data Entrant"))

                    {

                        DataEntrant = true;

                    }

                }

            }

            menuItems.Add(new MenuItem { Text = "DASHBOARD", Url = "/Index", IconCss = "fa fa-area-chart" });

            menuItems.Add(new MenuItem { Text = "MAP", Url = "/MapsPage", IconCss = "fa fa-map-marker" });

            menuItems.Add(new MenuItem { Text = "ART PATIENT UPLOAD", Url = "/patientlevel", IconCss = "fa fa-upload" });

            menuItems.Add(new MenuItem { Text = "AUDIT C&A UPLOAD", Url = "/AuditUploadPage", IconCss = "fa fa-upload" });

            menuItems.Add(new MenuItem { Text = "HEI AUDIT TOOL UPLOAD", Url = "/HEIAuditToolPage", IconCss = "fa fa-upload" });

            if (Administrator == true)

            {

                menuItems.Add(

                  new MenuItem

                  {

                      Text = "UTILITIES",

                      IconCss = "fa fa-cogs",

                      Items = new List<MenuItem>

                        {

                                      //new MenuItem{ Text = "PRIMARY DATA", Url="/PrimaryDataPage" },

                                      new MenuItem{ Separator=true},

                                      new MenuItem { Text = "MANAGE USERS", Items= new List<MenuItem>()

                                    {

                                            new MenuItem { Text = "REGISTER SYSTEM USER", Url = "/Account/RegisterUserPage" },

                                            new MenuItem { Separator = true },

                                            new MenuItem { Text = "MANAGE USER PASSWORDS", Url = "/Account/ChangeUserPasswordPage" },

                                            new MenuItem { Separator = true },

                                            new MenuItem { Text = "ACCOUNT MANAGEMENT", Url = "/Account/UserManagementPage" }

                                        }

                                       }

                            }

                  }

                );

            }

            menuItems.Add(

      new MenuItem

      {

          Text = "HELLO " + userManagement.GetStaffName().ToUpper() + " !",

          IconCss = "fa fa-user",

          Id = "LoginMenu",

          Items = new List<MenuItem>

{

                       new MenuItem{ Text = "CHANGE PASSWORD", Url="/Account/ChangePasswordPage",IconCss="fa fa-key"},

                       new MenuItem{ Separator=true},

                       new MenuItem{ Text = "LOG OUT", Url="/",IconCss="fa fa-sign-out"},

                }

      }

        );

        }

        base.OnAfterRender(firstRender);

    }

}

<style>

    .mydiv {

        min-width: 100%;

        background-color: #3498db;

    }

    .e-menu-wrapper, .e-menu-container {

        display: block;

    }

</style>

[Janakiraman Sakthivel]

Hi Ssekamatte, 

 

Thanks for your update.  

  

We have checked your reported query. And we need to validate more on this. So, we will update further details on 18^th November 2021. We appreciate your patience until then.  

 

Regards,            

Janakiraman S. 

[Ssekamatte James]

Hello Janakiraman,

You promised to give me feed back on the 18th November 2021 but I have not seen it yet.

Any information from your side?

[Janakiraman Sakthivel]

Hi Ssekamatte,  

   

Sorry for the inconvenience caused.  

   

We have faced some complexities regarding your requirement and need to ensure many dependent cases for this. So, we will update you the further details on November 25^th, 2021. We appreciate your patience until then.   

   

Regards,   

Janakiraman S. 

[Janakiraman Sakthivel]

Hi Ssekamatte, 

 

Thank you for your patience. 

 

We have checked your reported query with your provided codes and you have used the AuthorizeView component in your shared codes. We have tried to reproduce with your provided codes in our sample, If we tried to run a sample with the AuthorizeView component, we were unable to reproduce the problem and check. But, without the AuthorizeView component sample loaded without any issues. So, could you please provide a issue replicable sample or share AuthorizeView component related codes to reproduce the issue? Based on that, we will check and provide a better solution quickly. 

 

Regards, 

Janakiraman S. 

[Ssekamatte James]

Hi Janakiraman,

AuthorizeView is not the problem.As yoy can see in the video I have attached. I have commented out AuthorizeView in my layout page but still the problem is still on.

Check my video attached here and my razor page.

You can access my full system here incase you need to check out any styles / pages

https://we.tl/t-SeFGaJjzDq

Attachment: WithoutAuthorizeView_ff6060d1.rar

[Janakiraman Sakthivel]

Hi Ssekamatte, 

 

Thank you for your patience. 

  

We have validated your reported query and we are able to replicate the reported issue in our end. We have logged this as a bug, and the fix will be available in our first patch release after the Essential Studio Volume 4 main release, which is scheduled to be rolled out on end of December 2021. We appreciate your patience until then. 

 

You can also track the status of this bug by using below feedback portal link.    

 

Feedback Link: https://www.syncfusion.com/feedback/31015/unwanted-scroll-bar-is-shown-below-the-menubar-component 

 

Please get back to us, if you need further assistance.  

  

Regards,  

Janakiraman S.