Hi,
I am trying to put 2 words one under the other. I have an image as well. I need the icon to be to the left and the 2 words to be exactly one under the other.
10x
I am trying to put 2 words one under the other. I have an image as well. I need the icon to be to the left and the 2 words to be exactly one under the other.
10x
4 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
answered on 28 Dec 2011, 02:40 PM
Hello,
Try with   as shown.
ASPX:
Thanks,
Princy.
Try with   as shown.
ASPX:
<
telerik:RadToolBar
ID
=
"RadToolBar1"
runat
=
"server"
>
<
Items
>
<
telerik:RadToolBarButton
Text="First<br/>   First" CheckOnClick="true" runat="server" ImagePosition="Left" ImageUrl="~/Images/button_edit_grey.gif">
</
telerik:RadToolBarButton
>
</
Items
>
</
telerik:RadToolBar
>
Thanks,
Princy.
0
Naisha
Top achievements
Rank 1
answered on 29 Dec 2011, 08:37 AM
10x for the answer. It is strange that I cannot manage the icon and text separated.
now I have another problem, when given the item height, and use the <br/> the text is out of the box.....
How can I enforce the text to be under the line and not with large space.
the item code is:
10x
now I have another problem, when given the item height, and use the <br/> the text is out of the box.....
How can I enforce the text to be under the line and not with large space.
the item code is:
<
telerik:RadToolBarButton
runat
=
"server"
Text="Reports &<br/> Documents" Height="75px"
ImageUrl="~/img/Toolbar/reports-documents.png" ></
telerik:RadToolBarButton
>
10x
0
Accepted
Richard
Top achievements
Rank 1
answered on 30 Dec 2011, 05:47 PM
Itai:
I've messed with this for some time and I'm getting closer to your answer, but I'm not saavy enough with CSS to make it perfect. Perhaps your better at this. What I did was to apply a suggestion from the Button text multiline forum thread as follows:
Default.aspx:
Setting the line-height and float css properties helps to keep the text within the button and to the right of the image. I just haven't figured out how to align text and image correctly.
See the attached "wrapped_text_on_toolbar_button.png" image for my results.
Hope this helps!
I've messed with this for some time and I'm getting closer to your answer, but I'm not saavy enough with CSS to make it perfect. Perhaps your better at this. What I did was to apply a suggestion from the Button text multiline forum thread as follows:
Default.aspx:
<
style
type
=
"text/css"
>
.sepLine .rtbText
{
line-height: 10px !important;
float: right !important;
}
</
style
>
...
<
div
>
<
telerik:RadToolBar
ID
=
"RadToolBar1"
runat
=
"server"
>
<
Items
>
<
telerik:RadToolBarButton
runat
=
"server"
Text="Reports &<br/>Documents" Height="75px"
CssClass="sepLine" ImageUrl="~/images/folder.ico" ImagePosition="Left">
</
telerik:RadToolBarButton
>
</
Items
>
</
telerik:RadToolBar
>
</
div
>
Setting the line-height and float css properties helps to keep the text within the button and to the right of the image. I just haven't figured out how to align text and image correctly.
See the attached "wrapped_text_on_toolbar_button.png" image for my results.
Hope this helps!
0
Naisha
Top achievements
Rank 1
answered on 01 Jan 2012, 10:18 AM
10x a lot.
This is the key.
I just added:
and it is perfect.
10x again
This is the key.
I just added:
.sepLine .rtbText
{
line-height
:
14px
!important
;
float
:
right
!important
;
margin-top
:
20px
;
text-align
:
left
;
}
.RadToolBar_LeftNavigation .sepLine .rtbIcon
{
margin-top
:
10px
;
}
and it is perfect.
10x again