Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Multiple Lines on Regular Button

9 Answers 818 Views
Button
This is a migrated thread and some comments may be shown as answers.
Josh
Top achievements
Rank 1
Josh asked on 12 Jan 2012, 03:04 PM
Hello,

I am using a regular RadButton (ButtonType is not set) in Q2 2011 with the height set to 65px. I want two lines of text but cannot get it to work. I tried the solution in this thread but it did not work. I was hoping you could point me in the right direction.

Thanks,
Josh

9 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 12 Jan 2012, 03:41 PM
Hi,

You could use the following code:

<telerik:RadButton Skin="Office2007" runat="server" ID="RadButton1" Width="70px"
        Height="65px" Text="Carriage&#13;&#10;return&#13;&#10;separators" />

&#13;&#10; - makes the break.

All the best,
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
0
Josh
Top achievements
Rank 1
answered on 12 Jan 2012, 04:06 PM
button-multiline.png
This works in FireFox but in IE7 it creates a huge space (sometimes the space only appears after hovering over the button).

<telerik:RadButton runat="server" ID="RadButton1" Font-Size="Larger" Font-Bold="true" Width="200px" Height="65px" Text="Line1&#13;&#10;Line2"></telerik:RadButton>

Image attached
0
Accepted
Bozhidar
Telerik team
answered on 13 Jan 2012, 09:06 AM
Hello,

Note this is not a standard part of the RadButton behavior and when we provide such a code, it should be used on your own responsibility. Some solution will work in all browsers and some of them will not.

In that particular case, an additional CSS is necessary to be added in order to make it work for IE7 also:

<style type="text/css">
        .rbVerticalButton .rbDecorated
        {
            line-height: normal !important;
        }
</style>


All the best,
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
0
Cliff Gibson
Top achievements
Rank 1
answered on 07 Mar 2012, 02:04 PM
Hi

I've tried setting the button text to "Carriage&#13;&#10;return&#13;&#10;separators" and it works fine, however if I set the text in the code behind it does not work...

...any thoughts on this?

Cheers
Clff
0
Slav
Telerik team
answered on 09 Mar 2012, 01:15 PM
Hi Cliff,

Please use the method HtmlDecode to set the text of the RadButton, including the line breaks, from the code-behind:
RadButton1.Text = Server.HtmlDecode("Line1&#13;&#10;Line2");

Kind regards,
Slav
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.
0
Cliff Gibson
Top achievements
Rank 1
answered on 09 Mar 2012, 03:13 PM
Excellent - works perfectly :-)
0
Vasssek
Top achievements
Rank 1
answered on 15 Mar 2013, 08:22 AM
IE9-IE8.PNG
IE10.PNG
Hello,

I have issue with multi line text on radbutton. Everything worked perfect in IE8 or IE9 version. Yesterday, I have upgraded to IE10 and the text is now just in one line. It seems that IE10 ignores a special characters &#13;&#10; which makes a break.

Please help me to solve this issue...

Thank you.

Best regards

Vasssek
0
Bozhidar
Telerik team
answered on 15 Mar 2013, 11:59 AM
Hi,

As we mentioned before, this is not a standard part of the RadButton control, but it is just some solution that it works or it does not works for a normal input also. It is IE10 issue/decision to not support already similar behavior. I could suggest you, to use LinkButton type with Content template and some CSS to achieve similar result. Note that rounded corners were achieved via CSS3 and will not work in IE6-8.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <style type="text/css">
        span.RadButton.mulitline {
            line-height: normal !important;
            background-image: -webkit-linear-gradient(top, #7b7b7b 0%, #4a4a4a 50%, #313131 50%, #1b1b1b 100%);
            background-image: -moz-linear-gradient(top, #7b7b7b 0%, #4a4a4a 50%, #313131 50%, #1b1b1b 100%);
            background-image: -ms-linear-gradient(top, #7b7b7b 0%, #4a4a4a 50%, #313131 50%, #1b1b1b 100%);
            background-image: -o-linear-gradient(top, #7b7b7b 0%, #4a4a4a 50%, #313131 50%, #1b1b1b 100%);
            background-image: linear-gradient(top, #7b7b7b 0%, #4a4a4a 50%, #313131 50%, #1b1b1b 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7b7b7b', endColorstr='#1b1b1b',GradientType=0 );
            border-radius: 4px;
        }
         
        span.RadButton.mulitline:hover {
            border-color: #5c5c5c;
            color: #9eda29;
            background-color: #505050;
            background-image: -webkit-linear-gradient(top, #5c5c5c 0%, #2a2a2c 50%, #060606 50%, #020202 100%);
            background-image: -moz-linear-gradient(top, #5c5c5c 0%, #2a2a2c 50%, #060606 50%, #020202 100%);
            background-image: -ms-linear-gradient(top, #5c5c5c 0%, #2a2a2c 50%, #060606 50%, #020202 100%);
            background-image: -o-linear-gradient(top, #5c5c5c 0%, #2a2a2c 50%, #060606 50%, #020202 100%);
            background-image: linear-gradient(top, #5c5c5c 0%, #2a2a2c 50%, #060606 50%, #020202 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c5c5c', endColorstr='#020202',GradientType=0 );
        }
         
        span.RadButton.mulitline:active,
        span.RadButton.mulitline:focus {
            border-color: black;
            color: white;
            background-color: #606060;
            background-image: -webkit-linear-gradient(top, #6e6e6e 0%, #2b2b2d 50%, #050505 50%, #202020 100%);
            background-image: -moz-linear-gradient(top, #6e6e6e 0%, #2b2b2d 50%, #050505 50%, #202020 100%);
            background-image: -ms-linear-gradient(top, #6e6e6e 0%, #2b2b2d 50%, #050505 50%, #202020 100%);
            background-image: -o-linear-gradient(top, #6e6e6e 0%, #2b2b2d 50%, #050505 50%, #202020 100%);
            background-image: linear-gradient(top, #6e6e6e 0%, #2b2b2d 50%, #050505 50%, #202020 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6e6e6e', endColorstr='#202020',GradientType=0 );
        }
         
        .multilineContent {
            text-align: center;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="Scriptmanager1" runat="server" />
    <telerik:RadButton runat="server" ID="RadButton1" Width="200px" Height="65px" CssClass="mulitline" Skin="Black">
        <ContentTemplate>
            <div class="multilineContent">
                <span>text line 1</span><br />
                <span>text line 2</span>
            </div>
        </ContentTemplate>
    </telerik:RadButton>
    </form>
</body>
</html>

Note that we provide also ButtonType="SkinnedButton" which applies rounded corners and CSS gradients which allows you to set any height of the button, but we found a bug that this button type does not work together with Content Area. Until it is fixed, you could use the solution provided above.

Kind 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.
0
David Terrie
Top achievements
Rank 1
answered on 08 Apr 2013, 10:19 PM
Just FYI, I discovered today that IE10 ignores these characters in button Text.
Tags
Button
Asked by
Josh
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Josh
Top achievements
Rank 1
Cliff Gibson
Top achievements
Rank 1
Slav
Telerik team
Vasssek
Top achievements
Rank 1
David Terrie
Top achievements
Rank 1
Share this question
or