Splitter not showing in FF

[Antony]

Hi, I have a Splitter control contained within a SplitterPanel below a tabstrip control and toolbar control. The Splitter displays fine in IE but it isn't showing at all in Fire Fox. Does anybody have a suggestion?

spContent is the control that will not show

<telerik:RadPane ID="paRight" runat="server" BackColor="White" Scrolling="None" Width="100%" Height="100%">
        <telerik:RadTabStrip ID="tsContent" runat="server" Skin="Office2007" SelectedIndex="0">
        <Tabs>
            <telerik:RadTab runat="server" Text="Home"></telerik:RadTab>
            <telerik:RadTab runat="server" Text="Daily Alert"></telerik:RadTab>
            <telerik:RadTab runat="server" Text="View News Items"></telerik:RadTab>
        </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadToolBar ID="tbContent" runat="server" Skin="Office2007">
        <Items>
            <telerik:RadToolBarButton Text="Print"></telerik:RadToolBarButton>
            <telerik:RadToolBarButton Text="Email"></telerik:RadToolBarButton>
            <telerik:RadToolBarButton Text="Word/PDF"></telerik:RadToolBarButton>
        </Items>
        </telerik:RadToolBar>
        <telerik:RadSplitter ID="spContent" runat="server" Orientation="Horizontal" Skin="Office2007" Width="100%" Height="700px">
            <telerik:RadPane ID="paTop" runat="server" Width="100%" Scrolling="None" Height="100%" BackColor="Yellow">
                <telerik:RadGrid ID="grContent" runat="server" OnItemDataBound="grContent_ItemDataBind"
                 Skin="Vista" GridLines="None" Width="100%" Height="100%" >
                    <MasterTableView AutoGenerateColumns="false" TableLayout="Fixed" DataKeyNames="ID" Width="100%">
                        <Columns>
                            <telerik:GridTemplateColumn>
                                <HeaderStyle Width="3%" />
                                <HeaderTemplate>
                                    <asp:CheckBox ID="cbSelectAll" runat="server" />
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <asp:CheckBox ID="cbSelect" runat="server" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn UniqueName="FlagColumn" HeaderText="Flag">
                                <HeaderStyle Width="3%" />
                                <ItemTemplate>

                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn UniqueName="TitleColumn" HeaderText="Stream Title / Topic">
                                <HeaderStyle Width="30%" />
                                <ItemTemplate>
                                    <asp:Label ID="lblTitle" runat="server"></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn UniqueName="ContentTypeColumn" HeaderText="Content Type">
                                <HeaderStyle Width="30%" />
                                <ItemTemplate>
                                    <asp:Label ID="lblContentType" runat="server"></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn UniqueName="DateColumn" HeaderText="Date/Time">
                                <HeaderStyle Width="30%" />
                                <ItemTemplate>
                                    <asp:Label ID="lblDate" runat="server"></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings AllowColumnsReorder="False" AllowRowsDragDrop="true">
                        <Resizing AllowColumnResize="true" EnableRealTimeResize="false"
                        ResizeGridOnColumnResize="false" ClipCellContentOnResize="true" />
                        <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="1" />
                        <Selecting AllowRowSelect="True" EnableDragToSelectRows="true" />
                    </ClientSettings>
                </telerik:RadGrid>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="sbContent" runat="server" />
            <telerik:RadPane ID="paBottom" runat="server">

            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>

Thanks,

Antony

[Antony]

Also, when I remove the tabstrip and toolbar controls the splitter shows correctly

Thanks,

Antony

[Svetlina Anati]

Hello Antony,

I built up a test demo based on the provided code and test it both under IE7 and FF3. However, the splitter was visible under both browsers and the only problem I noticed was difference in the layout because of the float: left setting of the toolbar under FF - please examine the screenshots to see what I mean.

In order to fix this problem I suggest to insert the following DIV element after the toolbar declaration:

        <telerik:RadToolBar ID="tbContent" runat="server" Skin="Office2007">
                    <Items>
                        <telerik:RadToolBarButton Text="Print">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Email">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Word/PDF">
                        </telerik:RadToolBarButton>
                    </Items>
                </telerik:RadToolBar>
                <div style="clear: both; height: 1px; margin-bottom: -1px;">
                </div>
                <telerik:RadSplitter ID="spContent" runat="server" ResizeWithParentPane="false" Orientation="Horizontal"
                    Skin="Office2007" Width="100%" Height="700px">
                    <telerik:RadPane ID="paTop" runat="server" Width="100%" Scrolling="None" Height="100%"
                        BackColor="Yellow">
                    </telerik:RadPane>

Since the second splitter is not directly nested in the RadPane and there are other elements, too, you should set its ResizeWithParentPane property to false.

Let me know whether this is the problem you report and whether the suggested modifications solve it. In case you need further assistance, please prepare a sample reproduction demo, open a new support ticket and send it to me along with detailed explanations and some screenshots.

Regards,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Svetlina Anati]

Hello Antony,


All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Antony]

Hello Svetlina,

Just to let you know that it worked! Thanks for your help.

Regards,

Antony