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

RadSpliter/RadPane Cross Browser compatibility issue

1 Answer 68 Views

General Discussions

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

Oscar asked on 07 May 2010, 06:32 PM

radpaneissue.png

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

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

.......
</Columns>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadPane>

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

....

1 Answer, 1 is accepted

answered on 11 May 2010, 12:15 PM

contentcentered.gif

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.

<html xmlns="http://www.w3.org/1999/xhtml">

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

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