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

Converting Microsoft.Web.UI.WebControls TabStrip

4 Answers 118 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Super
Top achievements
Rank 1
Super asked on 02 Oct 2008, 03:00 PM
Hi,

I'm trying to evaluate the TabStrip control and try to match the functionality we currently use in our product using Microsoft.Web.UI.WebControls

So far functionality wise was accomplished by going through the help manual and the look and feel is where I'm unable to figure out how to match what we have. 

My Tab consists of 3 images left middle and right and base on the Status I have CSS to set the appropriate images (selected, hoover, default) 

I have looked at the skin and it is way beyond my expertise in CSS  I was wondering if there is a way to accomplish the same thing with local style sheet with out using the skin.

following is a sample declaration of a Microsoft

<iewc:tabstrip id="MessageSheet_Sheet" TargetID="MessageSheet" 
    TabDefaultStyle ="border-width:0 px; 
       border-color: #EFEFEF;  
       border-style: Groove;  
       background-image:url(images/TabMiddle-Normal.gif);  
       background-color:#CACACA; 
       color:#000000; 
       font-family:verdana;  
       font-size:11 px; 
       text-decoration: None; 
       border-left-style:none; 
       border-right-style:none; 
       border-bottom-style:none; 
       border-top-style:none; 
       cursor:pointer;" 
    TabHoverStyle =" background-image:url(images/TabMiddle-Normal.gif); 
       background-color:#CACACA; 
       color:#000000; 
       font-family:verdana; 
       font-size:11 px; 
       text-decoration: Underline; 
       cursor:pointer;" 
    TabSelectedStyle ="border-left-style:none; 
       border-right-style:none; 
       border-bottom-style:none; 
       border-top-style:Groove; 
       background-image:url(images/TabMiddle-Selected.gif); 
       background-color:#DACEB5; 
       color:#000000; 
       font-family:verdana; 
       font-size:11 px;text-decoration: None;" 
    runat="Server" 
    CssClass="MultiPage" 
    tabindex="-1" 
    > 
    <iewc:TabSeparator DefaultImageUrl="images/TabBegin-Normal.gif" SelectedImageUrl="images/TabBegin-Selected.gif" /> 
    <iewc:Tab Text="&nbsp;&nbsp; Incoming &nbsp;&nbsp;" ID="IncomingMessages_Tab"></iewc:Tab> 
    <iewc:TabSeparator DefaultImageUrl="images/TabEnd-Normal.gif" SelectedImageUrl="images/TabEnd-Selected.gif" /> 
    <iewc:TabSeparator DefaultImageUrl="images/TabBegin-Normal.gif" SelectedImageUrl="images/TabBegin-Selected.gif" /> 
    <iewc:Tab Text="&nbsp;&nbsp; Outgoing &nbsp;&nbsp;" ID="OutgoingMessages_Tab"></iewc:Tab> 
    <iewc:TabSeparator DefaultImageUrl="images/TabEnd-Normal.gif" SelectedImageUrl="images/TabEnd-Selected.gif" /> 
</iewc:tabstrip> 
 

Sincerely,

Fadi

4 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 06 Oct 2008, 04:02 PM
Hello Super Dad,

Please find attached an aspx page that demonstrates the converted skin. If you provide a screenshot and the images, we could help you further.

All the best,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Super
Top achievements
Rank 1
answered on 06 Oct 2008, 11:43 PM
Hi Alex,

Thanks a lot for your response,  that worked great I just needed to add "padding-right: 20px;" to the rstOut  and now my tabs look exactly as they should be.

Now the million dollar question,  is there a CSS Setting I can use to make the tab look over lapped?

Sincerely,

Fadi
0
Alex Gyoshev
Telerik team
answered on 07 Oct 2008, 06:11 AM
Hello Fadi,

Well, there are a bunch. The solution I prefer would be to add the following styles:

/* makes the tabs overlap by 10px */
.RadTabStrip .rtsUL
{
    padding-right: 10px;
}

.RadTabStrip .rtsLI
{
    margin-right: -10px;
}

/* sets the selected tab to be over the others */
.RadTabStrip .rtsSelected
{
    position: relative;
    z-index: 5;
}

However, I'm writing these styles blindly - if you open a support ticket and submit your skin (w/ images) I'd be glad to fine-tune them.

Best wishes,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Super
Top achievements
Rank 1
answered on 07 Oct 2008, 01:55 PM
Hi Alex,

That Style worked perfectly,  except the last tab,  if it is not selected then it shows the end cut off.

I will submit a sample project with the images.

thanks for all your help

Sincerely,

Fadi
Tags
TabStrip
Asked by
Super
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Super
Top achievements
Rank 1
Share this question
or