Toolbar dock not correct

10 posts, 0 answers
  1. Fit2Page
    Fit2Page avatar
    427 posts
    Member since:
    Feb 2007

    Posted 01 Nov 2018 Link to this post

    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

  2. Fit2Page
    Fit2Page avatar
    427 posts
    Member since:
    Feb 2007

    Posted 01 Nov 2018 Link to this post

    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

  3. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 05 Nov 2018 Link to this post

    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.
  4. Fit2Page
    Fit2Page avatar
    427 posts
    Member since:
    Feb 2007

    Posted 08 Nov 2018 in reply to Rumen Link to this post

    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>

  5. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 08 Nov 2018 Link to this post

    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.
  6. Fit2Page
    Fit2Page avatar
    427 posts
    Member since:
    Feb 2007

    Posted 08 Nov 2018 in reply to Rumen Link to this post

    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

  7. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 08 Nov 2018 Link to this post

    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.
  8. Fit2Page
    Fit2Page avatar
    427 posts
    Member since:
    Feb 2007

    Posted 12 Nov 2018 in reply to Rumen Link to this post

    Hi Rumen,

     

    Your suggestion helped me to solve the problem.

    Thanks for your help.

     

    Regards, Marc

  9. Fit2Page
    Fit2Page avatar
    427 posts
    Member since:
    Feb 2007

    Posted 28 Jan in reply to Rumen Link to this post

    Hi Rumen,

     

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

    See attached.

    Marc

  10. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 28 Jan Link to this post

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