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
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
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
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>
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
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
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
Hi Rumen,
Your suggestion helped me to solve the problem.
Thanks for your help.
Regards, Marc
Hi Rumen,
Still see a problem on FF with your editor PageTop toolbar.
See attached.
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