This is a migrated thread and some comments may be shown as answers.

changing height

3 Answers 263 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Justin Lee
Top achievements
Rank 1
Justin Lee asked on 19 Jul 2017, 06:00 PM

I have a diagram where I change the height from javascript on page resize like so:

$("#diagram").height(xxx);

When I call this, the height is applied as I can see the diagram's border cover the larger area.  This works fine when resizing the browser window by dragging a corner to resize. However, when I maximize the window, the diagram resizes, however the content in the lower part of the diagram remains hidden.

For example,if when I maximize the browser, the diagram becomes 100 pixels taller, the bottom 100 pixels of the diagram is empty - I cannot even drag shapes into that area.  If I resize via dragging the browser corner, it fixes itself again.

I attached screenshots that describe the behavior.

Is their any workaround you can think of?

 

 

 

3 Answers, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 21 Jul 2017, 10:57 AM
Hi Justin,

Can you send me a runnable Dojo example, so I can inspect the scenario, as this might be a bug?

For now, a workaround will be to call the diagram.resize() method:

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#methods-resize


Regards,
Stamo Gochev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Justin Lee
Top achievements
Rank 1
answered on 21 Jul 2017, 03:32 PM

Thanks Stamo.

I wasn't able to reproduce the issue exactly in dojo - when setting the height on page resize, the diagram worked as expected in dojo. However, I did create a dojo that somewhat describes the behavior.  

http://dojo.telerik.com/OKApA 

Open the dojo, run, and click "Get Taller".  The button increases the height of the diagram, but the lower shapes remain hidden.  In this example I could call resize() after increasing the height, however, in my case I am changing the height in page resize event - and the issue ONLY occurs when maximizing the browser.

My guess is that when maximizing, the control resizes itself before my page resize event is called.  So I change the height of the diagram AFTER the control resizes itself.  I could call resize() on page resize event, but then it would be called twice (once by the diagram, then once by me)

I will try calling the resize() method in a few places and see if I can get it working.

Thanks!

0
Stamo Gochev
Telerik team
answered on 24 Jul 2017, 06:19 AM
Hi Justin,

I confirm that your observations about calling the diagram.resize() method are correct. As for the window.resize event, - my tests (using Google Chrome) show that the event handler is called after the window has been maximized and its new dimensions can be calculated.

I am looking forward to your reply and the results of calling the diagram.resize() method. If you are also able to modify the Dojo example, so that the problem can be reproduced, you can send it back to me for further investigation.

Regards,
Stamo Gochev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Diagram
Asked by
Justin Lee
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Justin Lee
Top achievements
Rank 1
Share this question
or