Try Now
More in this section

Forums / Developing with Sitefinity / How to center PropertyEditorDialog?

How to center PropertyEditorDialog?

3 posts, 0 answered
  1. bemara57
    bemara57 avatar
    135 posts
    27 Mar 2008
    13 Oct 2010
    Link to this post
    I am triggering a dialog to open with the code below. The problem is that my trigger link is at the bottom of a page, so when I click to open the dialog, it opens at the top of the page (outside the viewport). So my question is how do I center it? I already have the Javascript logic, but the Javascript object/element is null, as if it does not exist on the page. Are there any client-side call backs I am missing?

    protected override void InitializeControls(System.Web.UI.Control viewContainer)
        this.Dialog = new PropertyEditorDialog();
        this.Dialog.ID = "dlgContent";
        this.Dialog.TypeContainer = this;
        this.Dialog.PropertyChanged += new PropertyValueChangedEventHandler(Dialog_PropertyChanged);
        this.lnkSelectContent.CommandName = "Samples.ControlDesigners.ContentListItemEditor";
        this.lnkSelectContent.CommandArgument = "Content";
        this.lnkSelectContent.Command += new CommandEventHandler(lnkSelectContent_Command);
    void Dialog_PropertyChanged(object source, PropertyValueChangedEventArgs e)
        txtContentID.Text = (string)e.PropertyValue;
    void lnkSelectContent_Command(object sender, CommandEventArgs e)
        string name = (string)e.CommandArgument;
        this.Dialog.Show(name, e.CommandName);
        this.AjaxManager.ResponseScripts.Add(String.Format("centerElementOnScreenAbsolute(document.getElementById('{0}'), 450, 400);", this.Dialog.ClientID)); //WILL NOT WORK, JS OBJECT NULL

    <script type="text/javascript">
    function centerElementOnScreenAbsolute(element, elmWidth, elmHeight) {
        var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
        var scrollLeft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
        var viewPortHeight = document.body.clientHeight || document.documentElement.clientHeight || 0;
        var viewPortWidth = document.body.clientWidth || document.documentElement.clientWidth || 0;
        if (elmWidth == null) {
            var w = element.style.width.substr(0, element.style.width.indexOf("px"));
            elmWidth = w != "" ? w : element.offsetWidth;
        if (elmHeight == null) {
            elmHeight = element.offsetHeight;
            var h = element.style.height.substr(0, element.style.height.indexOf("px"));
            elmHeight = h != "" ? h : element.offsetHeight;
        var topOffset = Math.ceil((viewPortHeight - elmHeight) / 2);
        var leftOffset = Math.ceil((viewPortWidth - elmWidth) / 2);
        var top = scrollTop + topOffset;
        var left = scrollLeft + leftOffset;
        element.style.position = "absolute";
        element.style.top = top + "px";
        element.style.left = left + "px";

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    25 Oct 2016
    13 Oct 2010
    Link to this post
    Hi bemara57,

    You can use only css to do this - in the dialog template or add css file inside OnPreRender by using this.Page.Header.Controls.Add(lnk) where lnk is HtmlLink with Href pointing to your style sheet

    You can use the following css

    <style type="text/css">
        border: 1px solid #666;
        padding:10px 15px 15px 15px;       
        position: absolute;
        background: #ededed;
        width: 80%;
        margin:0 !important;
        z-index: 10000;
        background: #F0F3F4 !important;
        position: absolute;      
        z-index: 15000;
        margin-left: -300px !important
        margin-top: -225px !important
        text-align: center;
        width: 600px !important;
        height: 450px !important;
        left: 50%;
        top: 50%
        border: 1px solid #666;
        padding: 10px 15px 15px 15px;    

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. bemara57
    bemara57 avatar
    135 posts
    27 Mar 2008
    13 Oct 2010
    Link to this post
    Thanks, but my problem was not horizontal alignment. And even though I have "top: 50%;" to handle the vertical alignment, this did not work when you are scrolled down in your page. The reason is because it is taking 50% of the entire page, not of the viewport. So the dialog would get rendered outside of my view (you would not know it even opened).

    I used jQuery to solve this problem though. I am now doing this when the dialog is triggered:
     Here is the code for the centerInClient:
    $.fn.centerInClient = function(options) {
        /// <summary>Centers the selected items in the browser window. Takes into account scroll position.
        /// Ideally the selected set should only match a single element.
        /// </summary>   
        /// <param name="fn" type="Function">Optional function called when centering is complete. Passed DOM element as parameter</param>   
        /// <param name="forceAbsolute" type="Boolean">if true forces the element to be removed from the document flow
        ///  and attached to the body element to ensure proper absolute positioning.
        /// Be aware that this may cause ID hierachy for CSS styles to be affected.
        /// </param>
        /// <returns type="jQuery" />
        var opt = { forceAbsolute: false,
                    container: window,    // selector of element to center in
                    completeHandler: null
        $.extend(opt, options);
        return this.each(function(i) {
            var el = $(this);
            var jWin = $(opt.container);
            var isWin = opt.container == window;
            // force to the top of document to ENSURE that
            // document absolute positioning is available
            if (opt.forceAbsolute) {
                if (isWin)
            // have to make absolute
            el.css("position", "absolute");
            // height is off a bit so fudge it
            var heightFudge = isWin ? 2.0 : 1.8;
            var x = (isWin ? jWin.width() : jWin.outerWidth()) / 2 - el.outerWidth() / 2;
            var y = (isWin ? jWin.height() : jWin.outerHeight()) / heightFudge - el.outerHeight() / 2;
            el.css("left", x + jWin.scrollLeft());
            el.css("top", y + jWin.scrollTop());
            // if specified make callback and pass element
            if (opt.completeHandler)

    jQuery plugin taken from here:
Register for webinar
3 posts, 0 answered