Editor - Image Selection Box Not Aligned with Scroll Position

6 posts, 0 answers
  1. Taras
    Taras avatar
    45 posts
    Member since:
    May 2015

    Posted 27 Oct Link to this post

    Guys, I have following problem regrading image selection in Kendo wysiwyg editor:

    When Scrolling through the WYSIWYG editor the selection for images does not follow the scroll for the editor.
    Steps to Reproduce
    1) Open WYSIWYG editor
    2) Add images and exta lines allowing for scrolling 
    3) Scroll down editor a little
    4) Select image

    As results selection box for re-sizing is not consistent with image

    I have most recent version of Kendo: 2017.3.1018

    Expected result for me - selecting image always lines up resizing box with image

    How I can solve this issue and get expected result? If you need screenshots or video capture to show this issue please let me know!

    Thanks for your time!

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1332 posts

    Posted 31 Oct Link to this post

    Hello Taras,

    Here's a screencast that shows how the image resize box looks like at my end when scrolling the page and selecting the image. I did not notice any misalignment. The demo used to record the screencast.
    If there are any additional steps that we need to follow in order to reproduce the issue, could you please share them?

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Taras
    Taras avatar
    45 posts
    Member since:
    May 2015

    Posted 02 Nov in reply to Ivan Danchev Link to this post

    Ivan,

    This is screencast - https://www.screencast.com/t/YxJSBOtNt how to replicate this issue. Please look, I used same steps to get it as described in first post

    Thanks!

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1332 posts

    Posted 06 Nov Link to this post

    Hello Taras,

    Thank you for posting a screencast. What it shows is browser behavior that Kendo UI does not have control over. If you follow the same steps in this dojo example, in which there are no Kendo UI widgets initialized, but a simple div element with contenteditable="true" the same behavior with regard to how the image resize handles are displayed on scrolling is exhibited.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Taras
    Taras avatar
    45 posts
    Member since:
    May 2015

    Posted 29 Nov in reply to Ivan Danchev Link to this post

    Ivan,

    I do not think that's any browser behavior. As I see "selecting region" is fully under control of Kendo API. Look screenshot I made for you.

    As you can see from screenshot Kendo Editor injects to DOM special <span> elements to draw selection region for image:

    <span data-guid="82325f7a-33f1-1ce8-ef19-c818e515b749" class="img-resize-selector" style="margin:10px;position:absolute;top:1163px;left:380.796875px;border:solid 2px red;width:6px;height:6px;cursor:se-resize;z-index:1;"></span>

    <span data-guid="82325f7a-33f1-1ce8-ef19-c818e515b749" class="img-resize-region region-top-right" style="position:absolute;top:873px;left:58.796875px;border:dashed 1px grey;width:332px;height:0px;"></span>

    <span data-guid="82325f7a-33f1-1ce8-ef19-c818e515b749" class="img-resize-region region-top-down" style="position:absolute;top:873px;left:58.796875px;border:dashed 1px grey;width:0px;height:300px;"></span>

    <span data-guid="82325f7a-33f1-1ce8-ef19-c818e515b749" class="img-resize-region region-right-down" style="position:absolute;top:873px;left:390.796875px;border:dashed 1px grey;width:0px;height:300px;"></span>

    <span data-guid="82325f7a-33f1-1ce8-ef19-c818e515b749" class="img-resize-region region-down-left" style="position:absolute;top:1173px;left:58.796875px;border:dashed 1px grey;width:332px;height:0px;"></span>

    Spans have position which setup in absolute values for screen. And that position must be re-evaluated on the each image click actually to get correct position of selecting region if parent container size been changed.

    Please let me know if you need more details from my side.

     

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1332 posts

    Posted 01 Dec Link to this post

    Hello Taras,

    At my end I don't see such span elements when inspecting the Editor and the image that is resized within it. Here's a dojo example. Could you modify it accordingly so that the HTML structure shown in the screenshot is replicated and link the example back for further review?

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 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