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

Toolbar dock not correct

9 Answers 35 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Fit2Page asked on 01 Nov 2018, 11:16 AM

Hi,

 

On the demo page: https://demos.telerik.com/aspnet-ajax/editor/examples/toolbarmode/defaultcs.aspx

 

The PageTop toolbar sticks under the top part of the page.

In Chrome, FF and Edge all the same.

 

Marc

9 Answers, 1 is accepted

Sort by
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 01 Nov 2018, 12:08 PM

One further thing when I look at the Toolbar PageTop demo: On the demo site the Toobar on top stands still when scrolling.

In my own isolated test environment the Toolbar wiggles up and down refer to screencast here:

 

https://youtu.be/4BESlY4eivU

 

Regards, Marc

0
Rumen
Telerik team
answered on 05 Nov 2018, 03:53 PM
Hello Marc,

Thank you for reporting the PageTop toolbar issue in the examples, which was due to the stylesheet and high z-index applied to the top panel. I fixed the problem and redeployed the demo files.

As a small note of gratitude for your report, I've updated your Telerik points.

For the second problem with the up and down wiggling, would it be possible for you to provide a reproduction page or a project so that I can repro the scenario. My advice is to test with the latest version 2019.3.910 and with the lightweight rendering of the control.

Best regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 08 Nov 2018, 11:56 AM

Hi Rumen,

 

I tested with 2018.3.910. Test is simple just:

 

<%@ Page Language="VB" AutoEventWireup="false" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Webshop statistieken</title>

</head>
<body>
    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <telerik:radeditor ToolbarMode="PageTop" RenderMode="Lightweight" Skin="Silk" runat="server" ID="text" />

    </form>
</body>
</html>

0
Rumen
Telerik team
answered on 08 Nov 2018, 02:06 PM
Hi Marc,

Thank you for the extra details. I was able to reproduce the flickering.

The page top toolbar is placed in RadWindow,  which is a an absolutely positioned div element and a first child of the form.
RadWindow PageTop toolbar is configured (pinned) to be shown always on top of the visible page and to keep its top position when scrolling the page:

_positionOnPageTop: function ()
{
var wnd = this._toolbarHolder;
var screen = wnd._getViewportBounds();
var x = screen.scrollLeft; // + screen.x;
var y = screen.scrollTop; // + screen.y;
wnd.moveTo(x, y);

When the user scrolls down the top property value changes and the div is repositioned via the wnd.moveTo() method. The calculations require time and this is causing the browser flickering.

Best regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 08 Nov 2018, 03:22 PM

I understand...but why is it not flickering on the demo site?

I could use the same approach then to cancel the flickering.

 

BR, Marc

0
Rumen
Telerik team
answered on 08 Nov 2018, 03:45 PM
Hi Marc,

I further examined the case and found that the problem does not happen because the HTML scrollbar is hidden in the demo and you are seeing and using the scroll of the DIV container where RadEditor resides. Here is a simplified example:

<div style="height:500px;border: 1px solid red;overflow-y: scroll;">
                <telerik:RadEditor ID="RadEditor1" runat="server" ToolbarMode="PageTop" Height="700px"></telerik:RadEditor>
</div>

You may find it useful for your scenario too.

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 12 Nov 2018, 07:47 AM

Hi Rumen,

 

Your suggestion helped me to solve the problem.

Thanks for your help.

 

Regards, Marc

0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 28 Jan 2019, 01:19 PM

Hi Rumen,

 

Still see a problem on FF with your editor PageTop toolbar.

See attached.

Marc

0
Rumen
Telerik team
answered on 28 Jan 2019, 02:01 PM
Hi Marc,

The z-index of the ShowOnFocus toolbar is around 10000, but the Progress Top Label of the demos has a zIndex of 42042.

The code below allows the developer to control the z-index of the ShowOnFocus toolbar according to the project specifications:

<script type="text/javascript">
    function OnClientLoad(editor, args)
    {
        var $ = $telerik.$;
        var editorElm = editor.get_element();
        var relativeParentPos = $(editorElm).offsetParent().position();
 
        editor.get_toolAdapter().get_window().add_show(function (sender, args) {
            sender.get_popupElement().style.zIndex = "100000";
        })
    }
</script>
             
 
<telerik:RadEditor RenderMode="Lightweight" OnClientLoad="OnClientLoad" runat="server" ID="RadEditor1" ToolbarMode="ShowOnFocus"></telerik:RadEditor>


Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Editor
Asked by
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Rumen
Telerik team
Share this question
or