Tabstrip and Multistrip form appearance in UI for ASP.NET AJAX TabStrip

Keith

2 posts

Member since:
Sep 2008

Posted 13 Jan 2009 Link to this post

I am using a RadTabStrip in combination with the RadMultiPage on a page using the embedded skin "Gray" and would like to give the appearance of a form with a thin border around the multipage. To accomplish this I use the follow css class (also shown control declaration on the aspx page):

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Gray" Width="700px" MultiPageID="RadMultiPage1" SelectedIndex="0" OnTabClick="RadTabStrip1_TabClick">
    </telerik:RadTabStrip>
    <telerik:RadMultiPage id="RadMultiPage1" runat="server" SelectedIndex="0" Width="700px" CssClass="multiPage" OnPageViewCreated="RadMultiPage1_PageViewCreated">
    </telerik:RadMultiPage>

.multiPage
{
    width: 700px;
    height: 335px;
    border: solid 1px #cccccc;
    background: #ffffff;
    padding: 10px 10px 0px 10px;
}

This accomplishes the objective except for one detail. On the highlighted tab the border extends across the base of the tab since as you can see from the css I have created the border around the entire multiplage. I could just create a border just around the left, bottom, and right side but I want the multipage to extend a little wider than the tabstrip to the right. So if I did this there would be a missing border on the top right side of the form. I'm sure there is a simple solution for this, but so far it has escaped me. Thanks for any help you can give.

Regards,
Keith

Paul

Admin

4281 posts

Posted 13 Jan 2009 Link to this post

Hello Keith,

Please find below you modified code snippet that works as expected.

    
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
                <style type="text/css"> 
        
                .multiPage 
        
                { 
        
                    width: 700px; 
        
                    height: 335px; 
        
                    border: solid 1px #cccccc;  
        
                    background: #ffffff;  
        
                    padding: 10px 10px 0px 10px; 
        
                    margin-top: -1px; 
        
                }     
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                    </asp:ScriptManager> 
        
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Gray" Width="700px" MultiPageID="RadMultiPage1" SelectedIndex="0" Style="position: relative"> 
        
                        <Tabs> 
        
                            <telerik:RadTab runat="server" Selected="True" Text="Root RadTab1"> 
        
                            </telerik:RadTab> 
        
                            <telerik:RadTab runat="server" Text="Root RadTab2"> 
        
                            </telerik:RadTab> 
        
                            <telerik:RadTab runat="server" Text="Root RadTab3"> 
        
                            </telerik:RadTab> 
        
                        </Tabs> 
        
                    </telerik:RadTabStrip> 
        
                    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="700px" CssClass="multiPage"> 
        
                        <telerik:RadPageView ID="RadPageView1" runat="server"> 
        
                            page1</telerik:RadPageView> 
        
                        <telerik:RadPageView ID="RadPageView2" runat="server"> 
        
                            page2</telerik:RadPageView> 
        
                        <telerik:RadPageView ID="RadPageView3" runat="server"> 
        
                            page3</telerik:RadPageView> 
        
                    </telerik:RadMultiPage> 
        
                </form> 
        
            </body> 
        
            </html>

All the best,
Paul
the Telerik team

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

arnaud

105 posts

Member since:
Jul 2008

Posted 17 May 2010 Link to this post

Hi Paul,

The margin-top: -1px; solution does not work under IE7 on my side (skin:default; Telerik 2010.1.309.35)

PS: Screenshot attached

Thank You
Arnaud

Yana

Admin

5032 posts

Posted 19 May 2010 Link to this post

Hi Arnaud,

The attached screenshot is missing, could you please attach it again? Thanks

Best regards,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

arnaud

105 posts

Member since:
Jul 2008

Posted 19 May 2010 Link to this post

Here it is.

Thanks

ex.jpg

Yana

Admin

5032 posts

Posted 25 May 2010 Link to this post

Hello Arnaud,

I tried to reproduce this but to no avail. Could you please send us a live url where we can observe the issue? Thank you.

Greetings,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.