Splitter not showing in FF

5 posts, 1 answers
  1. Antony
    Antony avatar
    41 posts
    Member since:
    Jan 2009

    Posted 28 Jan 2009 Link to this post

    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
  2. Antony
    Antony avatar
    41 posts
    Member since:
    Jan 2009

    Posted 28 Jan 2009 Link to this post

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

    Thanks,

    Antony
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 29 Jan 2009 Link to this post

    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.
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 29 Jan 2009 Link to this post

    Hello Antony,


    All the best,
    Svetlina
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Antony
    Antony avatar
    41 posts
    Member since:
    Jan 2009

    Posted 30 Jan 2009 Link to this post

    Hello Svetlina,

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

    Regards,

    Antony
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017