We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Panels move upon mouse hover and panel content update


I am using the Dashboard layout with the following configuration:
- 40 columns width
- Aspect ration of 100/60
- cell spacing of 10, 10
- resize handles of new string[] { "e-south-east", "e-east", "e-west", "e-south-west", "e-south" };
- Panels with the following settings
Panel Width Height row  column
Label01 5 5 0 0
chart01 34 11 0 5
label02 5 5 7 0
StackedIcon 10 5 15 0
Table01 13 6 15 11
Table02 13 6 15 24

The code with the above settings in the model is:
            List<int> pnlKeyList = Model.Panels.Keys.ToList();
            for (int PnlCnt = Model.Panels.Count-1; PnlCnt >= 0; PnlCnt--)
                DashboardLayoutPanel pnl = Model.Panels[pnlKeyList[PnlCnt]];
                Panel.SizeX(pnl.SizeX).SizeY(pnl.SizeY).Row(pnl.Row).Col(pnl.Col).Content(pnl.Content).Header("<p>" + pnl.Header + "</p>").Add();

The dashboard renders okay (see below picture) but the panels on mouse hover on any panel or on a content update via Ajax of a panel content, the whole display jumps vertically up or down.  What is causing this and how can I prevent it?

Thanks in advance.



3 Replies

KR Keerthana Rajendran Syncfusion Team October 24, 2019 11:35 AM UTC

Hi Ian Davies,  
Thanks for contacting Syncfusion support.  
We have checked your reported query that panel jumps vertically up and down. We are not able to reproduce the issue from our end. For your reference, we have prepared a dashboard layout sample. In that sample, we have updated the panel content using ajax request. 
Refer the sample link below. 
If we misunderstand your requirement. Can you please share the additional details regarding your requirement? It will helpful for us to resolve your issue at the earliest. 
1.      Package version being used in your application  
2.      Check whether the panel content moves vertically due to animation effect or the entire panel element moves.  
3.      Have you refreshed or changed the panels property dynamically after updating the content of the panel?  
4.      Issue reproducing sample (if possible). 
Please let us know, if you have any concerns. 

ID Ian Davies October 26, 2019 11:04 AM UTC

Hi Keerthana,


I have managed to adapt the sample you have provided to replicate the behaviour could you please take a look (this was done in VS 2019), please note to replicate you need to normally collapse and expand the side menu bar at least once as per the comment I have made in the index.cshtml page - it seems to be related to if there is any spare space on the page but I would think it still should not do it:


<!-- If this button is here it does not jump panels - if removed on mouse focurs it does - open and collapse the menu at least once and it will do it on mouse hover of a panel

<div style="padding:10px">

Html.EJS().Button("add").CssClass("e-primary").Content("Update Content").Render()



Please note to fit it into the max file size I have had to do remove the packages as per the sample sent before.

Thanks in advance.





Attachment: WebApplication12068775938_(2)_71e1dd7d.zip

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team October 28, 2019 11:32 AM UTC

Hi Ian,

A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  

Shameer Ali Baig S.

Live Chat Icon For mobile
Up arrow icon