Tabstrip and Multistrip form appearance

6 posts, 0 answers
  1. Keith
    Keith avatar
    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
  2. Paul
    Admin
    Paul avatar
    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.
  3. arnaud
    arnaud avatar
    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
  4. Yana
    Admin
    Yana avatar
    5043 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.
  5. arnaud
    arnaud avatar
    105 posts
    Member since:
    Jul 2008

    Posted 19 May 2010 Link to this post

    Here it is.

    Thanks
  6. Yana
    Admin
    Yana avatar
    5043 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.
Back to Top