Multiple Lines on Regular Button

10 posts, 1 answers
  1. Josh
    Josh avatar
    61 posts
    Member since:
    Dec 2009

    Posted 12 Jan 2012 Link to this post

    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
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 12 Jan 2012 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Josh
    Josh avatar
    61 posts
    Member since:
    Dec 2009

    Posted 12 Jan 2012 Link to this post

    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
  5. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 13 Jan 2012 Link to this post

    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
  6. Cliff Gibson
    Cliff Gibson avatar
    45 posts
    Member since:
    Oct 2009

    Posted 07 Mar 2012 Link to this post

    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
  7. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 09 Mar 2012 Link to this post

    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.
  8. Cliff Gibson
    Cliff Gibson avatar
    45 posts
    Member since:
    Oct 2009

    Posted 09 Mar 2012 Link to this post

    Excellent - works perfectly :-)
  9. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 15 Mar 2013 Link to this post

    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
  10. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 15 Mar 2013 Link to this post

    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.
  11. David Terrie
    David Terrie avatar
    1 posts
    Member since:
    Jan 2010

    Posted 08 Apr 2013 Link to this post

    Just FYI, I discovered today that IE10 ignores these characters in button Text.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017