Panels move upon mouse hover and panel content update

[Ian Davies]

Hi,

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:

@Html.EJS().DashboardLayout("dashLayout").Columns(Model.Columns).CellSpacing(Model.CellSpacing).ResizableHandles(Model.ReszieHandles).AllowResizing(true).Panels(Panel=>

        {

            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();

            }

        }).Render()

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.

Regards

Ian

[Keerthana Rajendran]

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. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication12068775938.zip 

 

 

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. 

 

 

Regards, 

Keerthana. 

[Ian Davies]

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()

</div>

-->

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.

 

Ian.

 

 

Attachment: WebApplication12068775938_(2)_71e1dd7d.zip

[Shameer Ali Baig Sulaiman Ali Baig]

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.  

  

https://www.syncfusion.com/Account/Logon?ReturnUrl=/support/directtrac 

Regards,

Shameer Ali Baig S.