Text allignment on radButton when using as ImageButton

[Farrukh]

I have a scenario that i want to use radButton as image button where i can easily adjust text-allign property to Left but i want to use text on the bottom of the button Like a scenario If we put an image/icon and Below that icon a label is placed and together they are encapsulated in a Panel. can we use RadButton in the same way? A complete example code 'll be highly appreciated while u can also pasted the code for this scenario.

[Shinu]

Hi Farrukh,

Please take  a look into the following code snippet I tried to show the text below the image icon of the Radbutton.

ASPX:

<span class="txtImg">
    <telerik:RadButton ID="btnBgrImg1" runat="server" Width="42px" Height="43px" ForeColor="Black"
        CssClass="goButtonClassHov" Text="GO!">
        <Image ImageUrl="../Images/cb_go_empty.png" IsBackgroundImage="true"></Image>
    </telerik:RadButton>
</span>

CSS:

<style type="text/css">
    .goButtonClassHov .rbText
    {
        margin-top: 55% !important;
        font-size: 10px !important;
    }
    #btnBgrImg1
    {
        background-repeat: no-repeat !important;
    }
    .txtImg
    {
        display: block !important;
        float: left !important;
        width: 150px !important;
    }
</style>

Thanks,
Shinu.

[Farrukh]

i have tried with your code. I have an image of almost 90 * 85, i exactly want to achieve what you have attached as a screen shot. I have copy and pasted your code but still its not working in my case.I also have changed width and height to adjust the used image display but its not working :(
a screen shot is attached, the above part is my desired part while the below part reflects the code which you have provided..
Any help would be appreciated.

[Shinu]

Hi Farrukh,

Try to adjust the margin-top property of the CSS class '.goButtonClassHov .rbText'. Please have a look into the following CSS that I have tried.

CSS:

<style type="text/css">
    .goButtonClassHov .rbText
    {
        margin-top: 100% !important;
        font-size: 10px !important;
    }
    .txtImg
    {
        display: block;
        float: left;
        width: 150px;
    }
    .RadButton_Default
    {
        background-repeat: no-repeat;
        width: 165% !important;
    }
</style>

Thanks,
Shinu.

[Dwight]

Hi

I want to achieve a similar effect but with a radmenu

Is it possible to have an icon positioned above the text in the root menu only? if so how would I achieve that?

I can easily get an icon to the left of the text but I cant work out how to place it above it


Thx for any assistance

[Shinu]

Hi Dwight,

Please try the following CSS to achieve your scenario.

ASPX:

<telerik:RadMenu ID="radmenuIconPosition" runat="server">
    <Items>
        <telerik:RadMenuItem Text="Item1" ImageUrl="../Images/plus.gif" Height="30px">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

CSS:

<style type="text/css">
    .rmText
    {
        margin-top: 10px !important;
        float: left !important;
    }
    .RadMenu .rmLeftImage
    {
        margin: 0px 0px 0 -11px !important;
        float: left !important;
    }
</style>

Thanks,
Shinu.

[Dwight]

Thx Shinu, it was good to learn about the float element however it was not what i wanted

I have opened a support ticket as i want three changes to the menu that I currently have so I will wait for a reply from that one


I appreciate your reply though :)