Vertical Alignment of Content in RadPane

2 posts, 0 answers
  1. Babak Rezvani
    Babak Rezvani avatar
    13 posts
    Member since:
    Apr 2008

    Posted 15 Jun 2009 Link to this post

    Hi,

    I am using Rad Controls version: Telerik.Web.UI 2008.01.0619.35.
    I have nested splitters and Rad panes, in which I am trying to align Image vertical middle and horizontal center.  I am using asp:Panel inside RadPane, and setting the HorizontalAlign property of panel to align center.  Horizontal Align is working fine in IE but not on firefox.  I have to use Div tag as Image container because I want to resize the image.

    Also I need to vertical-align: middle for the content in RadPane. Below is the code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestResize.aspx.cs" Inherits="VX2Casting.TestResize" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>FullWindow</title>
        <style type="text/css">
        html, body, form
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
        </style>
        
    <telerik:RadCodeBlock ID="radCodeBlockMain" runat="server">
        <script type="text/javascript">
            function OnLvLargeViewResizeHandler() {
                var imgLvLargeView = document.getElementById("imgLvLargeView");

                //Resize Image large view
                var nWidthL, nHeightL, nImgWidthL, nImgHeightL, nOrgWidthL, nOrgHeightL;
                var RadSplitterLvRight = $find("<%=RadSplitterLvRight.ClientID%>");

                if (RadSplitterLvRight != null) { var RadPaneLvRightTop = RadSplitterLvRight.getPaneById("RadPaneLvRightTop"); nWidthL = RadPaneLvRightTop.get_width() - 10; nHeightL = RadPaneLvRightTop.get_height() - 10; }
                var imgLvLargeViewTmp = new Image(); imgLvLargeViewTmp.src = imgLvLargeView.src; nOrgWidthL = imgLvLargeViewTmp.width; nOrgHeightL = imgLvLargeViewTmp.height;

                if (nWidthL > 0 && nHeightL > 0) {
                    var p = 0; var pH = nOrgHeightL / nHeightL; var pW = nOrgWidthL / nWidthL;
                    if (pH > pW) { p = pH; } else { p = pW; }
                    nImgWidthL = nOrgWidthL / p; nImgHeightL = nOrgHeightL / p;
                }

                if (imgLvLargeView != null) {
                    var divImageObj = imgLvLargeView.parentNode;
                    if (nImgWidthL > 0 && nImgHeightL > 0) {
                        if (divImageObj != null) { divImageObj.style.width = (nOrgWidthL > nImgWidthL ? nImgWidthL : nOrgWidthL) + 'px'; divImageObj.style.height = (nOrgHeightL > nImgHeightL ? nImgHeightL : nOrgHeightL) + 'px'; }
                    }
                    if (divImageObj != null) { divImageObj.style.visibility = "visible"; }
                }
            }
        
        </script>
    </telerik:RadCodeBlock>        
    </head>
    <body>
        <form id="form2" runat="server">
            <asp:ScriptManager ID="ScriptManager" runat="server" />
            <div id="ParentDivElement" style="height: 100%;">
                <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
                    Orientation="Horizontal" Skin="Outlook">
                    <telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150"
                        Scrolling="none">
                        <!-- Place the content of the pane here -->
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />
                    <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">
                        <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Outlook" LiveResize="true">
                            <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">
                                <!-- Place the content of the pane here -->
                            </telerik:RadPane>
                            <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />
                            <telerik:RadPane ID="ContentPane" runat="server">
                                <telerik:RadSplitter ID="RadSplitterLv" runat="server" Orientation="Vertical" VisibleDuringInit="false" SplitBarsSize="2">
                                    <telerik:RadPane ID="RadPaneLvLeft" runat="server" >
                                        LV Left pane
                                    </telerik:RadPane>
                                    <telerik:RadSplitBar ID="RadSplitBarLv" runat="server" CollapseMode="None" />
                                    <telerik:RadPane ID="RadPaneLvRight" runat="server">
                                        <telerik:RadSplitter ID="RadSplitterLvRight" runat="server" Orientation="Horizontal" VisibleDuringInit="false" OnClientLoaded="OnLvLargeViewResizeHandler">
                                            <telerik:RadPane ID="RadPaneLvRightTop" runat="server" Scrolling="None">
                                                <asp:Panel ID="pnlLvLargeView" runat="server" Width="100%" Height="100%" BorderWidth="0" HorizontalAlign="Center">
                                                      <asp:PlaceHolder ID="PlaceHolderForLvImage" runat="server">
                                                        <div id="divLvLargeView" style="width:350px; height:500px; visibility:visible;">
                                                            <asp:Image ID="imgLvLargeView" ImageUrl="test1.JPG" runat="server" BorderWidth="0" Width="100%" />
                                                        </div>
                                                      </asp:PlaceHolder>                                                
                                                      <asp:PlaceHolder ID="PlaceHolderForLvVideo" Runat="server">
                                                            VIDEO CONTENT                                                  
                                                      </asp:PlaceHolder>
                                                </asp:Panel>
                                            </telerik:RadPane>
                                            <telerik:RadSplitBar ID="RadSplitBarLvRight" runat="server" Visible="false" />
                                            <telerik:RadPane ID="RadPaneLvRightBottom" runat="server" Height="40" Locked="true">
                                                LV Navigation
                                            </telerik:RadPane>
                                        </telerik:RadSplitter>
                                    </telerik:RadPane>
                                </telerik:RadSplitter>
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                </telerik:RadSplitter>
                <telerik:RadSplitter ID="RadSplitter1" Runat="server">
                </telerik:RadSplitter>
            </div>
            
        </form>
    </body>
    </html>


    Could you please suggest me how to align content in Radpane Horizontal center and Vertical middle on Internet explorer and Firefox browsers.

    Thanks
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 Jun 2009 Link to this post

    Hello Babak ,

    Your question is not directly related to the RadControls and radSplitter but to general ASP.NET and CSS knowledge. If you succeed to center the image in a standard DIV element, all you should do after that is to put this DIV element in the RadPane and everything should work as expected. You can find different tips and techniques of centering elements in their wrappers on the web, e.g in the article below:

    http://www.w3.org/Style/Examples/007/center#block

    Regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top