RadSpliter/RadPane Cross Browser compatibility issue

2 posts, 0 answers
  1. Oscar
    Oscar avatar
    21 posts
    Member since:
    Sep 2008

    Posted 07 May 2010 Link to this post

    Hello
    I have a RadSplitter with two side-by side rad panes.
    The right pane has a couple of controls inside, not fully filling the pane
    In IE7 and IE8 compatibility mode, objects are centered in the right pane
    In IE8, Safari and others, objects are "left justified". I have not been able to find the pane or splitter property that centers them.
    Please see attachment
    Thanks!

    Relevant code follows

     

    <

     

    telerik:RadSplitter id="RadSplitter1" runat="server" skin="Office2007"

     

     

    height="500px" width="950px" BorderSize="0" BorderStyle="None" >

     

     

    <

     

    telerik:RadPane id="LeftPane" runat="server" width="150px" Scrolling="None" Collapsed="false" BackColor="White">

     

     

    <telerik:RadPanelbar ID="BarraCli" runat="server" skin="Vista" ExpandMode="FullExpandedItem" Height="500px"

     

     

    Width="100%" CssClass="BarraCli">

     

     

    <Items>

     

     

    <telerik:RadPanelItem runat="server" Text="xxxxx" PostBack="false" Expanded="false" Value="0">

     

    .... more code here

     

    </telerik:RadPanelItem>

     

     

    </Items>

     

     

    </telerik:RadPanelbar>

     

     

    </

     

    telerik:RadPane>

     

    <

     

    telerik:RadPane id="MiddlePane" runat="server" >

     

     

     

    <div id="Div1" style="height: 20px"></div>

     

     

     

    <asp:Panel ID="Panel1" runat="server" CssClass="Titulos" SkinID="Ptitulo" Width="600px" >

     

     

    .... more things here
    </
    asp:Panel>

     

     

    <telerik:RadGrid ID="Grilla" Skinid="Grilla2" runat="server" OnNeedDataSource="........" DataKeyNames="...."

     

     

    Width="600px" Height="400px" PageSize = "12" >

     

     

    <MasterTableView NoMasterRecordsText=".." >

     

     

    <Columns>

     

     

    .......
    </
    Columns>

     

     

    </MasterTableView>

     

     

    </telerik:RadGrid>

     

     

    </telerik:RadPane>

     

    </

     

    telerik:RadSplitter>
    ........

    ....

     

  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 11 May 2010 Link to this post

    Hi Oscar,

    As I see from the code provided, your content is nested into two main elements: one with class set and the other one with ID: .Titulos, #Grilla.

    In order to center these two elements, you need to set the following CSS: 
    <style type="text/css">
     .Titulos, #Grilla
      {
       margin: 0 auto;
      }
    </style>

    If you have more elements with some content that you want centered, you should also apply to them the above CSS styles.

    Please find bellow the whole piece of my test code and an image attached showing the centered position of the elements in Safari. I put some background and border colors for better visualization.

    <head runat="server">
        <title></title>
        <style type="text/css">
            .Titulos, #Grilla
            {
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all"
            Skin="WebBlue"></telerik:RadFormDecorator>
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Skin="Office2007" Height="500px"
            Width="950px" BorderSize="0" BorderStyle="None">
            <telerik:RadPane ID="LeftPane" runat="server" Width="150px" Scrolling="None" Collapsed="false"
                BackColor="White">
                <telerik:RadPanelBar ID="BarraCli" runat="server" Skin="Vista" ExpandMode="FullExpandedItem"
                    Height="500px" Width="100%" CssClass="BarraCli">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="xxxxx" PostBack="false" Expanded="false"
                            Value="0">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
            </telerik:RadPane>
            <telerik:RadPane ID="MiddlePane" runat="server">
                <asp:Panel ID="Panel1" runat="server" CssClass="Titulos" SkinID="Ptitulo" Width="600px"
                    BackColor="ActiveBorder">
                    <legend>Custom Button</legend>
                    <div style="padding-left: 16px;">
                        <asp:Button ID="Button1" runat="server" CssClass="customButton" />
                    </div>
                    <br />
                    <br />
                    <br />
                    <br />
                </asp:Panel>
                <telerik:RadGrid ID="Grilla" SkinID="Grilla2" runat="server" DataKeyNames="...."
                    Width="200px" Height="100px" PageSize="12">
                    <MasterTableView>
                        <Columns>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </telerik:RadPane>
        </telerik:RadSplitter>
        </form>
    </body>
    </html>


    Kind regards,
    Bojo
    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. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top