This is a migrated thread and some comments may be shown as answers.

Multiple Lines on Regular Button

9 Answers 1024 Views

Button

This is a migrated thread and some comments may be shown as answers.

9 Answers, 1 is accepted

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
Line2"></telerik:RadButton>

Image attached

Accepted

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

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 
 which makes a break.

Please help me to solve this issue...

Thank you.

Best regards

Vasssek

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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