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.
6 Answers, 1 is accepted
0

Shinu
Top achievements
Rank 2
answered on 24 Sep 2013, 03:36 AM
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:
CSS:
Thanks,
Shinu.
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
;
}
#btnBgrImg
1
{
background-repeat
:
no-repeat
!important
;
}
.txtImg
{
display
:
block
!important
;
float
:
left
!important
;
width
:
150px
!important
;
}
</style>
Thanks,
Shinu.
0

Farrukh
Top achievements
Rank 1
answered on 24 Sep 2013, 05:23 AM
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.
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.
0

Shinu
Top achievements
Rank 2
answered on 25 Sep 2013, 04:16 AM
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:
Thanks,
Shinu.
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.
0

Dwight
Top achievements
Rank 1
answered on 26 Apr 2014, 07:44 AM
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
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
0

Shinu
Top achievements
Rank 2
answered on 28 Apr 2014, 05:17 AM
Hi Dwight,
Please try the following CSS to achieve your scenario.
ASPX:
CSS:
Thanks,
Shinu.
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.
0

Dwight
Top achievements
Rank 1
answered on 28 Apr 2014, 08:05 AM
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 :)
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 :)