This is a migrated thread and some comments may be shown as answers.

Vertical Alignment of Content in RadPane

1 Answer 291 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

Babak Rezvani asked on 15 Jun 2009, 03:05 PM

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">
                    
                </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">
                            
                        </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

1 Answer, 1 is accepted

answered on 18 Jun 2009, 09:32 AM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Vertical Alignment of Content in RadPane

1 Answer, 1 is accepted