Text over Radbutton displayed outside in IE 7 & IE 8(With compatibility mode)

4 posts, 0 answers
  1. Nileshkumar
    Nileshkumar avatar
    18 posts
    Member since:
    May 2011

    Posted 26 May 2011 Link to this post

    Text on the RadButton displayed outside the RadButton if the  number of characters are more than 15 in IE 7 & IE8(With compatibility mode) but it working fine with the FF 3.6 or FF 4.0.
    Any solution???
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 26 May 2011 Link to this post

    Hello,

    Could you please send us a sample code that reproduces the issue? We have test it with the following code:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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">
             
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadButton ID="rb1" runat="server" Text="This is button with a long long text to check it with Internet Explorer 7"></telerik:RadButton>
        </form>
    </body>
    </html>

    Everything works as expected in all browsers. Attached is ie7button.gif showing the result in IE7.

    Best wishes,
    Bojo
    the Telerik team

    Browse the vast support resources we have to jump start 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. Nileshkumar
    Nileshkumar avatar
    18 posts
    Member since:
    May 2011

    Posted 26 May 2011 Link to this post

    Hi,
    I have attached img file for my issue named text-on-button.png.
    In my case Button size should remain same but text on button more than 15 or 20 characters. In your case button size also going to be increases.
    I have also attached output for FF browser named In FF_Buuton Output.png
  5. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 26 May 2011 Link to this post

    Hello Nileshkumar,

    It is expected behavior if you have specified width to the button, check both examples bellow:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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">
             
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadButton ID="rb1" runat="server" Height="65px" Text="This is button with a long long text to check it with Internet Explorer 7"></telerik:RadButton>
        <br />
        <telerik:RadButton ID="RadButton1" runat="server" Height="65px" Width="100" Text="This is button with a long long text to check it with Internet Explorer 7"></telerik:RadButton>
        </form>
    </body>
    </html>

    The normal behavior of asp:button is also the same - it does not put longer text on several rows. To ensure that your text will appear on several rows even you have specified width of the button, you should use the following including CSS in the head section:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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">
            .rbDecorated
            {
                line-height: normal !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadButton Skin="Office2007" runat="server" ID="RadButton1" Width="60px"
            Height="65px" Text="Carriage&#13;&#10;return&#13;&#10;separators" />
        </form>
    </body>
    </html>


    Best wishes,
    Bojo
    the Telerik team

    Browse the vast support resources we have to jump start 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.

Back to Top