Two or three lines in Text property

[Technology]

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.

[Bozhidar]

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

[Technology]

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.

[Bozhidar]

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

[Technology]

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.

[Miky]

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" />

[Bozhidar]

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