Two or three lines in Text property

7 posts, 1 answers
  1. Technology
    Technology avatar
    53 posts
    Member since:
    Jul 2010

    Posted 22 Nov 2010 Link to this post

    Dear Telerik Support,

    how can i write the text in two lines?

    Example (not working):
    Text= "First Line <br /> Second Line"

    First Line
    Second Line

    And how do i change the text align with image or not?
    If you have image and the align is Left, the text is behind the image.

    Thank you in advance

    Best Regargs,
    Navarino Technology Department.
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 22 Nov 2010 Link to this post

    Hi,

    If you are using standard button, the text could not be placed in two lines, as it will increase the height and the sprite image will not be rendered properly. This could be to done with a link button:

    <telerik:RadButton ID="RadButton1" runat="server" Text="First Line Second Line Third Line"
            Skin="Default" ButtonType="LinkButton" Width="70px" Height="66">
        </telerik:RadButton>

    To make the button to render on three lines I have used width and height properties in order to limit the width of the button and to fire it to be rendered on more lines. As by default, the link button height is 22px, and now I have three lines, I increased it to 66px in order to keep the proportions.

    We are planning to include a vertical orientated button, which will have higher height and vertically positioned icons and text, but I could tell if that will be available for Q3 SP1.

    If you want to use a button with a higher height and default look now, you should create a custom skin, where the image sprite image and background positions will be changed.

    As for the second problem - when you are using left alignment - I could not reproduce it. Could you send me a sample button code that shows the described behavior?

    The button text is placed in the center in order to look good if you or nor using first and/or secondary icons.

    Best wishes,
    Bojo
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Technology
    Technology avatar
    53 posts
    Member since:
    Jul 2010

    Posted 22 Nov 2010 Link to this post

    Dear Bojo,

    first of all, thank you for your very fast respond.

    Below you will find the code for the Text Align with Icon error.
    Attach you will find the button as shown.
    <td class="style17"
        style="border-width: thin; border-color: #006699; vertical-align: middle; text-align: center; border-bottom-style: dashed; border-left-style: dashed;"
        colspan="2">
          
        <telerik:RadButton ID="RadButton1"
                           runat="server"
                           Text="test test test test test"
                           Skin="Default"
                           ButtonType="LinkButton" 
                           Width="90px"
                           Height="66"
                           style="text-align: left">
                           <Icon  PrimaryIconUrl="~/Images/Orders.png"
                                  PrimaryIconHeight="40"
                                  PrimaryIconWidth="40"/>
        </telerik:RadButton>
        </td>

    Thank you again in advance for your time.

    Best Reagrds,
    Navarino Technology Department.


  5. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 22 Nov 2010 Link to this post

    Hi,

    It is not supposed in that type of button to put such big icons. If you want to achieve that beahvior, I would suggest you to use the following code:

    <table cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td class="style17" style="border-width: thin; border-color: #006699; vertical-align: middle;
                    text-align: center; border-bottom-style: dashed; border-left-style: dashed;"
                    colspan="2">
                    <telerik:RadButton ID="RadButton5" runat="server" Text="test test test test test"
                        Skin="Default" ButtonType="LinkButton" Width="90px" Height="66" CssClass="leftPos">
                        <Icon PrimaryIconUrl="Orders.png" PrimaryIconHeight="40" PrimaryIconWidth="40" />
                    </telerik:RadButton>
                </td>
            </tr>
        </table>

    As you can see, I put an extra CSS class, which will be used to left align the text and to increase the button padding in order the text not to be placed under the image. Bellow is the additional CSS lines, that you could put in the head section of your document:

    .leftPos {padding-left: 48px !important;}
    .leftPos .rbText {text-align: left !important;}


    All the best,
    Bojo
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Technology
    Technology avatar
    53 posts
    Member since:
    Jul 2010

    Posted 22 Nov 2010 Link to this post

    Dear Bojo,

    With your way, the image and text align is working correct, as i wanted.

    thank you for your quick support, once again.

    Best Regards,
    Navarino Technology Department.
  7. Miky
    Miky avatar
    13 posts
    Member since:
    Dec 2011

    Posted 16 May 2013 Link to this post

    I don't think the sprite is a problem.  Works perfectly.
    But the text doesn't go on 2 lines.
    I really need it.
    Is there a way by now ?

    <telerik:RadButton runat="server" ID="btnCreeEC" Skin="Default" Text="Création d'un élément couvert"
        OnClientClicked="ouvrirCreationEC" AutoPostBack="False" Width="90px" Height="66px" />

  8. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 17 May 2013 Link to this post

    Hello,

    In your case, the sprite is not a problem because RadButton supports a sprite with height of 65px. As you set a height of 66, it almost fits an already existing sprite and correct background positions.

    You could use the following in order to make button multiline:

    <telerik:RadButton runat="server" ID="btnCreeEC" Skin="Default" Text="Création d'un&#13;&#10; élément&#13;&#10; couvert"
     AutoPostBack="False" Width="90px" Height="66px" CssClass="muliLines" />

    &#13;&#10; placed after word will break in the new line.

    It works flawless in all browsers except IE10 (for IE7 it is necessary to set line-height CSS property to normal). That's why as you could see I have added a CSS class to the button (marked in orange).

    .muliLines .rbDecorated[type="submit"] {
        white-space: normal;
        *line-height: normal;
    }

    White-space normal will do the things in IE10. While line-height: normal with * in front will do the things in IE7.

    Actually, white-space: normal will do the things even without using &#13;&#10; but it does not work in IE7. So if your target is not IE7, you could skip the part with &#13;&#10; and just use the multiLines class with white space property:

    <telerik:RadButton runat="server" ID="btnCreeEC" Skin="Default" Text="Création d'un élément couvert"
     AutoPostBack="False" Width="90px" Height="66px" CssClass="muliLines" />

    and:

    .muliLines .rbDecorated[type="submit"] {
        white-space: normal;
    }


    Regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017