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

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

4 Answers 288 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
PureCode
Top achievements
Rank 2
PureCode asked on 09 Aug 2008, 07:52 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Paul
Telerik team
answered on 11 Aug 2008, 02:12 PM
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.
0
PureCode
Top achievements
Rank 2
answered on 11 Aug 2008, 06:56 PM
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
0
reverland
Top achievements
Rank 1
answered on 06 Feb 2009, 04:41 PM
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?
0
Paul
Telerik team
answered on 09 Feb 2009, 07:20 AM
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.
Tags
TabStrip
Asked by
PureCode
Top achievements
Rank 2
Answers by
Paul
Telerik team
PureCode
Top achievements
Rank 2
reverland
Top achievements
Rank 1
Share this question
or