This is a migrated thread and some comments may be shown as answers.
Editor - Image Selection Box Not Aligned with Scroll Position
5 Answers 11 Views
This is a migrated thread and some comments may be shown as answers.
Taras
Top achievements
Rank 2
Taras asked on 27 Oct 2017, 05:42 PM

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!

5 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 31 Oct 2017, 01:57 PM
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.
0
Taras
Top achievements
Rank 2
answered on 02 Nov 2017, 06:25 PM

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!

0
Ivan Danchev
Telerik team
answered on 06 Nov 2017, 02:48 PM
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.
0
Taras
Top achievements
Rank 2
answered on 29 Nov 2017, 08:36 PM

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.

 

0
Ivan Danchev
Telerik team
answered on 01 Dec 2017, 03:52 PM
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.
Asked by
Taras
Top achievements
Rank 2
Answers by
Ivan Danchev
Telerik team
Taras
Top achievements
Rank 2
Share this question
or