Okay,
The issue here is easy.
Tabstrip + MultiPageView looks, plain and simple, crap. In other words, it looks NOTHING like a 'tab control'.
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
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.
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
0
Accepted
Hello PureCode,
Please find below a sample code snippet that show how to achieve the desired look.
Greetings,
Paul
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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
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
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
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
Hello reverland,
Here's the code snippet for the Vista skin:
Sincerely yours,
Paul
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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.