PageTop margin?

[fabian]

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

[Rumen]

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

[fabian]

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

[fabian]

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

[Dobromir]

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