Making the 'TabStrip' + 'MultiPageView' combination look GOOD.

5 posts, 1 answers
  1. PureCode
    PureCode avatar
    97 posts
    Member since:
    Jul 2006

    Posted 09 Aug 2008 Link to this post

    Okay,

    The issue here is easy.

    Tabstrip + MultiPageView looks, plain and simple, crap. In other words, it looks NOTHING like a 'tab control'.

    • The MultiPageView and TabStrip have a one pixel gap in between them.
    • The MultiPageView needs to be able to have the borders (and the lack of a piece of border under the selected tab) as a 'real tab control' has.
    • There is no padding at all in the PageViews, which needs to be done by hand.
    • CSS is little help with the 'look like a REAL tab control' issue.
    Example of how it looks in Telerik default:

    How it should NOT look

    Mock-up example of how it SHOULD look:

    How it SHOULD look

    Guess i just found the reason why most other ASP.NET control suites have an actual tab control, instead of some thrown together controls that do not work together properly.

    The real issue here is, how the heck am I supposed to demonstrate a web app to a potential customer when it looks like crap?

    Also, gigantic workarounds are not an option, after all you call your controls RAD, which stands for RAPID Application Development, not 'Massive Workaround Development'. If i wanted the latter, I'd be using Microsoft standard controls.

    Once again, this sort of stuff can cost me a sale, customers are anal after all. In the end, if i do not make this sale, Telerik doesn't make a sale either.

    Regards,

    Mike
  2. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 11 Aug 2008 Link to this post

    Hello PureCode,

    Please find below a sample code snippet that show how to achieve the desired look.

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">  
        .mystyle  
        {  
            margin-top: -2px;  
            padding: 3px;  
        }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server">  
            </asp:ScriptManager> 
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" Skin="Outlook" Style="position: relative; z-index: 1000" SelectedIndex="0">  
                <Tabs> 
                    <telerik:RadTab runat="server" Text="Root RadTab1" Selected="True">  
                    </telerik:RadTab> 
                    <telerik:RadTab runat="server" Text="Root RadTab2">  
                    </telerik:RadTab> 
                </Tabs> 
            </telerik:RadTabStrip> 
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" BorderColor="DarkGray" BorderStyle="Solid" BorderWidth="1px" CssClass="mystyle" SelectedIndex="0">  
                <telerik:RadPageView ID="RadPageView1" runat="server">  
                    <div style="border: solid 1px red">  
                        RadPageView1  
                    </div> 
                </telerik:RadPageView> 
                <telerik:RadPageView ID="RadPageView2" runat="server">  
                    <div style="border: solid 1px red">  
                        RadPageView2</div> 
                </telerik:RadPageView> 
            </telerik:RadMultiPage> 
        </form> 
    </body> 
    </html> 


    Greetings,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. PureCode
    PureCode avatar
    97 posts
    Member since:
    Jul 2006

    Posted 11 Aug 2008 Link to this post

    Thanks, that did the trick.

    I might be handy to document this somewhere for future reference of all users.

    A little bit of a workaround, but do-able on a normal time-scale for a project, so that's cool.

    Thanks again.

    Mike
  4. reverland
    reverland avatar
    9 posts
    Member since:
    Mar 2007

    Posted 06 Feb 2009 Link to this post

    This fix works perfectly for the Outlook skin, but not for Vista skin. There is a 1 pixel gap between the tab and the multipage on the left. How would I fix this?
  5. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 09 Feb 2009 Link to this post

    Hello reverland,

    Here's the code snippet for the Vista skin:

    <html xmlns="http://www.w3.org/1999/xhtml"
    <head id="Head1" runat="server"
        <title>Untitled Page</title> 
        <style type="text/css">  
        div.RadTabStrip_Vista .rtsSelected { 
            border-bottom: 0; 
            padding-bottom: 1px; 
        } 
         
        .multiPage_wrapper 
        { 
            margin-top: -2px; 
        } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server"
            </asp:ScriptManager> 
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" Skin="Vista" Style="position: relative; z-index: 1000" SelectedIndex="0"
                <Tabs> 
                    <telerik:RadTab runat="server" Text="Root RadTab1" Selected="True"
                    </telerik:RadTab> 
                    <telerik:RadTab runat="server" Text="Root RadTab2"
                    </telerik:RadTab> 
                </Tabs> 
            </telerik:RadTabStrip> 
            <div class="multiPage_wrapper"
                <telerik:RadMultiPage ID="RadMultiPage1" runat="server" BorderColor="DarkGray" BorderStyle="Solid" BorderWidth="1px" SelectedIndex="0"
                    <telerik:RadPageView ID="RadPageView1" runat="server"
                        RadPageView1 
                    </telerik:RadPageView> 
                    <telerik:RadPageView ID="RadPageView2" runat="server"
                        RadPageView2 
                    </telerik:RadPageView> 
                </telerik:RadMultiPage> 
            </div> 
        </form> 
    </body> 
    </html> 


    Sincerely yours,
    Paul
    the Telerik team

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