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

Tabstrip and Multistrip form appearance

5 Answers 239 Views

TabStrip

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

Keith asked on 13 Jan 2009, 01:57 PM

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

5 Answers, 1 is accepted

answered on 13 Jan 2009, 02:28 PM

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.