skin issue

5 posts, 1 answers
  1. Itai
    Itai avatar
    16 posts
    Member since:
    Oct 2007

    Posted 28 Dec 2011 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 Dec 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Itai
    Itai avatar
    16 posts
    Member since:
    Oct 2007

    Posted 29 Dec 2011 Link to this post

    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
  5. Answer
    jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 30 Dec 2011 Link to this post

    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!


  6. Itai
    Itai avatar
    16 posts
    Member since:
    Oct 2007

    Posted 01 Jan 2012 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017