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

skin issue

4 Answers 93 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Naisha
Top achievements
Rank 1
Naisha asked on 28 Dec 2011, 01:36 PM
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

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 28 Dec 2011, 02:40 PM
Hello,

Try with &nbsp as shown.
ASPX:
<telerik:RadToolBar ID="RadToolBar1" runat="server">
 <Items>
   <telerik:RadToolBarButton Text="First<br/>&nbsp&nbsp&nbspFirst" 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:
 <telerik:RadToolBarButton runat="server" Text="Reports &amp;<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:
    <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:

.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
Tags
ToolBar
Asked by
Naisha
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Naisha
Top achievements
Rank 1
Richard
Top achievements
Rank 1
Share this question
or