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

RadToolBarButton with Image and Overlaid Text?

2 Answers 136 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Benjamin
Top achievements
Rank 1
Benjamin asked on 04 Aug 2008, 02:49 PM
Hi,

I am trying to put together a toolbar that uses completely custom images for the buttons. The problem I am having is that the Text for the button appears to get hidden behind the images, so all you can see is the tab. Here is my example mark-up code:

<div>

<telerik:RadToolBar ID="RadToolBar1" runat="server" CssClass="toolbar" Skin="" EnableEmbeddedSkins="false" >

<Items>

<telerik:RadToolBarButton Text="Dashboard" Value="btnDashboard" Group="Toolbar" CheckOnClick="true" AllowSelfUnCheck="false" CssClass="button" ImageUrl="../normal-item.gif" CheckedImageUrl="../selected-item.gif" />

<telerik:RadToolBarButton Text="Summary" Value="btnSummary" Group="Toolbar" CheckOnClick="true" AllowSelfUnCheck="false" CssClass="button" ImageUrl="../normal-item.gif" CheckedImageUrl="../selected-item.gif" />

<telerik:RadToolBarButton Text="Projects" Value="btnProjects" Group="Toolbar" CheckOnClick="true" AllowSelfUnCheck="false" CssClass="button" ImageUrl="../normal-item.gif" CheckedImageUrl="../selected-item.gif" />

</Items>

</telerik:RadToolBar>

</div>

Is there something I am doing wrong or is simply not possible to overlay text on top of the image for the button?

Thanks,

Ben

2 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 07 Aug 2008, 07:01 AM
Hi Benjamin,

You can use the following CSS to achieve this effect:
.RadToolBar .rtbIcon 
    position:absolute
    z-index:1; 
 
.RadToolBar .rtbText 
    position:relative
    z-index:2; 

Best wishes,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Benjamin
Top achievements
Rank 1
answered on 07 Aug 2008, 03:50 PM
Thanks for the reply Alex, I'll give it a go.

Regards,

Ben
Tags
ToolBar
Asked by
Benjamin
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Benjamin
Top achievements
Rank 1
Share this question
or