Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
L.
90
WebSplitter in a WebTab won't display
posted

I have a form that uses a WebTab control, and in one of the tabs I'm embedding a WebSplitter.  When I test the form, the WebTab renders ok but the WebSplitter is not visible (I'm using Infragistics version 10.2, MS Visual Basic 2008,  and IE 8).  If I use IE's developers tools, I can see that one of the CSS properties for the WebSplitter is setting visibility to 'hidden'.  If I change it to 'visible', then the WebSplitter displays (note:  if you are not familiar with IE's developers tools, it allows you to play with CSS attributes on the fly while viewing your form actively.  This is how I am able to change the visibility.).  I have tried overriding this by adding a "style='visibility:visible;'" on the WebSplitter tag directly, but this doesn't work.  Neither does setting the visible attribute on the WebSplitter tag or setting visiblity to true in the code behind.  If I take the WebSplitter out of the WebTab altogether, it displays fine.

Do WebSplitters just not work in WebTabs?  Or is there a different setting I should be looking at?

Parents
No Data
Reply
  • 24497
    posted

    Hi,

    Thank you for report.

    I tested WebSplitter in WebTab and it work correctly is size of splitter is set in pixels. If size of splitter is %, then splitter does not appear, because, at the time of its initialization the bounds of its container (ContentPane of tab item) is not configured yet.
    That scenario was missed by WebTab and future versions of WebTab will try to implement automatic layout of child splitter.
    For now I suggest you to process load/tabChange events (condition when contentPane of selected tab was setup) and trigger layout of splitter explicitly. Below is example.

    <script type="text/javascript">
    function fixSplitter(webTab)
    {
     if (webTab.get_selectedIndex() == 1)
     {
      var splitter = $find('<%=WebSplitter1.ClientID%>');
      splitter.layout();
     }
    }
    </script>
    <ig:WebTab ID="WebTab1" runat="server" Width="600px" Height="600px">
     <Tabs>
          <ig:ContentTabItem runat="server" Text="Tab 1">
           <Template>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="Button2" runat="server" Text="Button" />
           </Template>
          </ig:ContentTabItem>
          <ig:ContentTabItem runat="server" Text="Tab 2">
           <Template>
            <ig:WebSplitter ID="WebSplitter1" runat="server" Width="99%" Height="99%">
             <Panes>
              <ig:SplitterPane runat="server">
               <Template>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                <asp:Button ID="Button3" runat="server" Text="Button" />
               </Template>
              </ig:SplitterPane>
              <ig:SplitterPane runat="server">
               <Template>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Button" />
               </Template>
              </ig:SplitterPane>
             </Panes>
            </ig:WebSplitter>
           </Template>
          </ig:ContentTabItem>
          <ig:ContentTabItem runat="server" Text="Tab 3">
          </ig:ContentTabItem>
     </Tabs>
     <ClientEvents SelectedIndexChanged="fixSplitter" Loaded="fixSplitter" />
    </ig:WebTab>

Children
No Data