changing height

4 posts, 0 answers
  1. Justin Lee
    Justin Lee avatar
    164 posts
    Member since:
    Dec 2009

    Posted 19 Jul Link to this post

    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?

     

     

     

  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    186 posts

    Posted 21 Jul Link to this post

    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.
  3. Justin Lee
    Justin Lee avatar
    164 posts
    Member since:
    Dec 2009

    Posted 21 Jul in reply to Stamo Gochev Link to this post

    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!

  4. Stamo Gochev
    Admin
    Stamo Gochev avatar
    186 posts

    Posted 24 Jul Link to this post

    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.
Back to Top