+1-888-365-2779
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
    Registered:
    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.Controls.Add(this.Dialog);
        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";
    }
    </script>

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 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">
     
     
    div.Dialog   
    {
        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%
        overflow:hidden;
        border: 1px solid #666;
        padding: 10px 15px 15px 15px;    
        }
     
    </style>


    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
    Registered:
    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:
    this.AjaxManager.ResponseScripts.Add("$('.Dialog').centerInClient();");
    
    
     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)
                    el.remove().appendTo("body");
                else
                    el.remove().appendTo(jWin.get(0));
            }
     
            // 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)
                opt.completeHandler(this);
        });
    }

    jQuery plugin taken from here:
    http://www.west-wind.com/weblog/posts/459873.aspx
Register for webinar
3 posts, 0 answered