PageTop margin?

5 posts, 0 answers
  1. fabian
    fabian avatar
    11 posts
    Member since:
    Dec 2010

    Posted 01 Mar 2011 Link to this post

    hello is there a way to add a margin to the editor tool bar when using "PageTop" ?
    I don't want it display it at the very top but maybe 100px down from the top.
    Thank you
  2. Rumen
    Admin
    Rumen avatar
    13927 posts

    Posted 02 Mar 2011 Link to this post

    Hi Fabian,

    You can achieve your goal when the ToolbarMode is set to ShowOnFocus using the following code:

    <telerik:RadEditor runat="server" ID="RadEditor1" ToolbarMode="ShowOnFocus" OnClientLoad="OnClientLoad">
    </telerik:RadEditor>
    <script type="text/javascript">
        function OnClientLoad(editor) {
            var wnd = editor.get_toolAdapter().get_window();
            wnd.add_show(function (sender, args) {
                //Get last toolbar and return to old owner
                //Move window
                setTimeout(function () {
                    wnd.moveTo(100, 100);
                    $telerik.cancelRawEvent(args);
                     
                }, 10);
            });
        }
    </script>


    Best regards,
    Rumen
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. fabian
    fabian avatar
    11 posts
    Member since:
    Dec 2010

    Posted 02 Mar 2011 Link to this post

    Hello,
    thank you for the reply.
    That wouldn't work because when you scroll down the tool bar doesn't move down like 'PageTop' does.
    Any other suggestions?
    thank you
  4. fabian
    fabian avatar
    11 posts
    Member since:
    Dec 2010

    Posted 02 Mar 2011 Link to this post

    Hello this seems work:

    .reToolbarWindow
    {
        position: fixed !important;
        top:31px !important;
        left: 50% !important;
        width:900px !important;
        margin-left: -450px !important;
    }
    but I have a problem with FireFox, the drop down menus from the tool bar don't show in the right position using this css style. Any suggestions?
    I have this same problem with a rad tool bar inside a div using position:fixed

    Please see attachment.
    thank you
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 08 Mar 2011 Link to this post

    Hi Fabian,

    This is expected behavior with the applied modifications. By design, the dropdowns of RadEditor's toolbar calculate their position according the the position of the toolbar and by design the toolbar is absolute positioned and its top property is modified in order to position the toolbar on the top of the browser's window.

    To achieve the required result, you can set RadEditor's ToolbarMode property to ShowOnTop and manually position the toolbar with the required padding, e.g.:
    <telerik:RadEditor runat="server" ID="RadEditor1" ToolbarMode="ShowOnFocus" OnClientLoad="OnClientLoad">
    </telerik:RadEditor>
     
    <script type="text/javascript">
        function OnClientLoad(editor, args)
        {
            var interval = null;
            var wnd = editor.get_toolAdapter().get_window();
     
            wnd.add_show(function (sender, args)
            {
                interval = window.setInterval(positionToolbar, 100);
            });
     
            function positionToolbar()
            {
                if (wnd.get_popupElement().style.display != "none")
                {
                    var scrollTop = document.body.scrollTop;
                    if (scrollTop == 0)
                    {
                        if (window.pageYOffset)
                            scrollTop = window.pageYOffset;
                        else
                            scrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
                    }
     
                    var x = 0;
                    var y = scrollTop + 20; //20px padding from the top
     
                    wnd.get_popupElement().style.width = "";
     
                    wnd.moveTo(x, y);
                }
                else
                {
                    window.clearInterval(interval);
                }
            }
        }
    </script>

    I hope this helps.

    Best wishes,
    Dobromir
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top