Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolBar > skin issue

• Itai

  Posted on Dec 28, 2011 (permalink)

  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

  Attached files

  • 2words.png

  Reply

• Princy MVP

  Posted on Dec 28, 2011 (permalink)

  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.

  Reply


• Itai

  Posted on Dec 29, 2011 (permalink)

  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

  Attached files

  • TextBR.png

  Reply

• Answer jumpstart Master

  Posted on Dec 30, 2011 (permalink)

  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!
  
  
  

  Attached files

  • wrapped-text-on-toolbar-button.png

  Reply

• Itai

  Posted on Jan 1, 2012 (permalink)

  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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolBar > skin issue