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

RadSpliter/RadPane Cross Browser compatibility issue

1 Answer 34 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Oscar
Top achievements
Rank 1
Oscar asked on 07 May 2010, 06:32 PM
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>
........

....

 

1 Answer, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 11 May 2010, 12:15 PM
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.
Tags
General Discussions
Asked by
Oscar
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Share this question
or