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

Tabstrip and Multistrip form appearance

5 Answers 180 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
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

Sort by
0
Paul
Telerik team
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.
0
arnaud
Top achievements
Rank 1
answered on 17 May 2010, 11:20 AM
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
0
Yana
Telerik team
answered on 19 May 2010, 11:50 AM
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.
0
arnaud
Top achievements
Rank 1
answered on 19 May 2010, 12:35 PM
Here it is.

Thanks
0
Yana
Telerik team
answered on 25 May 2010, 10:06 AM
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.
Tags
TabStrip
Asked by
Keith
Top achievements
Rank 1
Answers by
Paul
Telerik team
arnaud
Top achievements
Rank 1
Yana
Telerik team
Share this question
or