1. Home
  2. Forum
  3. Blazor
  4. Resizing not canceling on mouse up, cannot move panel with iframe content in it.

Resizing not canceling on mouse up, cannot move panel with iframe content in it.

HI all.

I am a fairly new Blazor and Syncfusion user, and am therefore still trying to wrap my head around all of it, and while project templates work flawlessly to show use case, I cannot seem to figure out this dashboard layout component.

I am trying to make use of the dashboard as a way to display multiple twitter and other social media feeds one next to another one, and have not had much success with it.

I am loading the https://platform.twitter.com/widgets.js  file from static local storage inside the _Host.cshtml file, and then try to display the twitter feed inside the first panel of the dashboard, by adding it into the contenttemplate element like this:


<DashboardLayoutPanel Column="0" Row="0" >
<ContentTemplate>
<div>
<a hidden class="twitter-timeline" data-width="100%" data-height="100%" data-theme="dark" rel='nofollow' href="https://twitter.com/ecomi_?ref_src=twsrc%5Etfw">Tweets by ecomi_</a>
</div>
</ContentTemplate>
</DashboardLayoutPanel>

This produces an iframe element filling up the layot panel, with appropriate scroll bars, however it causes issues with controlling the dashboard panel itself:

When resizing, mouse down event registers in the bottom-right corner and when moved, mouse position and movement is not detected if mouse is hovering on top of the content that resides inside the panel. So it is easy to enlarge it, but can only be sized back down if mouse is moved out of the content area across the panel.
The panel also cannot be moved, it seems that iframe hijacks mouse focus and events entirely.

I tried to add events OnResizeStart and OnResizeStop to hide the content while moving it, but wasn't successful in finding a way to hide the content of the panel. Even if, this would not solve the moving issue.

Is there an elegant way to solve this, and how would you propose to handle such a case?

I have seen you have been absolutely fabulous and engaged in helping providing by far the best support I have seen online so far, with code samples, focusing on each issue and question and trying to do your best to help your users out. I really appreciate that, and its really nice to see some still care for that, instead of using generic replies and never-working troubleshooting steps that have zero relation to the original questions.

Any help would be appreciated, and at the same time, I'd appreciate finding some good online resources regarding possibilities and use cases for your components in Blazor framework (server side, at this time).

Also, the .e-panel { transition:none!important;} trick found here was a very helpful information!
Your default sample do indeed look like lagging and not moving smooth, so I do agree with what was said there - For the sake of people who don't research these things as we do, you might reconsider including it in default sample as to get the best performance and still very good looking dashboard layout component, which is unmatched from what I researched!


Thank you,

B


2 Replies
IL Indhumathy Loganathan Syncfusion Team July 7, 2021 03:07 PM UTC

Hi Marko, 
 
Greetings from Syncfusion support. 
 
Currently we are validating your reported problem in Dashboard Layout component with the provided details. We will provide you further details within two business days(09/07/2021). 
 
We appreciate your patience. 
 
Regards, 
Indhumathy L 


SS Sharon Sanchez Selvaraj Syncfusion Team July 9, 2021 02:22 PM UTC

Hi Marko, 
 
Thanks for your patience. 
 
We checked with your reported query related to iFrame content inside Dashboard Layout. 
 
As known, the iFrame content when embedded inside the Dashboard Layout will be responsive.  
 
We understand that the dragging cursor must be updated when hovering on the panel content. Since we have mouse events which are mandatory to be made in the iFrame, it wouldn't be proper if the required cursor is applied for the whole panel content. 
 
If suppose you would require no events to be handled in the iFrame, you can specify the CSS, pointer-events as none for the iFrame. 
 
Refer to the code snippet: 
 
iframe{ 
 
pointer-events: none; 
 
} 
 
 
Also, we would suggest you to set the container as the draggableHandle element which would allow you to make the appropriate drag operations when hovered. 
 
Please refer to the below forum for more details on draggableHandle: 
 
 
And with respect to the resizing handle, we would suggest you to set a bottom padding for the panel content through which the required handle won't interfere when resizing the panel. 
 
Refer to the below API link in Dashboard Layout. 
 
 
And in order to know more about other Syncfusion components, please refer to the below documentation and demo links for further reference. 
 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
 
Sharon Sanchez S. 


Loader.
Up arrow icon