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

RadTextBox css styling issues

1 Answer 226 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
SteveV
Top achievements
Rank 1
SteveV asked on 20 Sep 2012, 05:49 PM

I have a website running Sitefinity that I recently upgraded from 5.1 SP1 to 5.1 SP2 (RadControls v2012.2.607.40). Prior to the upgrade RadTextBox styling was working properly in that I could define a css class rule that included a width property and use it for the RadTextBox's CssClass property and everthing worked as expected.  Since the 5.1 SP2 upgrade none of my width properties are applied and the RTB seems to be defaulting to 160px width.

Here's what my markup and css look like:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ZRTBTest.aspx.cs" Inherits="SitefinityWebApp.ZRTBTest" %>
 
<!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>
        .rtbWrp
        {
            font-family: Tahoma,Verdana,sans-serif;
            font-size: 12px;
            width: 600px;
            background-color: #c0c0c0;
            padding: 5px;
        }
         
        .rtb550, .rtb450, .rtb350
        {
            padding: 3px !important;
            vertical-align: middle !important;
            margin-bottom: 15px !important;
            border: 1px solid #ff0000 !important;
        }
         
        .rtb550
        {
            width: 550px !important;
        }
         
        .rtb450
        {
            width: 450px !important;
        }
         
        .rtb350
        {
            width: 350px !important;
        }
    </style>
</head>
<body>
 
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager> <div>
        <div class="rtbWrp">
            <telerik:RadTextBox ID="RadTextBox1" runat="server" CssClass="rtb550">
            </telerik:RadTextBox></div>
        <div class="rtbWrp">
            <telerik:RadTextBox ID="RadTextBox2" runat="server" CssClass="rtb450">
            </telerik:RadTextBox>
        </div>
        <div class="rtbWrp">
            <telerik:RadTextBox ID="RadTextBox3" runat="server" CssClass="rtb350">
            </telerik:RadTextBox>
        </div>
    </div>
    </form>
</body>
</html>

Everything looks fine in Firefox (15.0.1), Chrome (21.0.1180.89) and IE 8 (see rtb_firefox_chrome_ie8standards.PNG).  In IE9 Standards mode the width of the text boxes is clipped at 160px (see rtb_ie9_standardsmode.PNG).  I could swear this was working in the last version.

Anyone else seeing this?

Thanks -- Steve

1 Answer, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 26 Sep 2012, 06:12 AM
Hello Steve,

There was a bug in IE 9, which was fixed with overflow: hidden on the wrapper. However, this CSS property is removed in the last version and if you are still using the previous version you can workaround the issue with the following CSS rule
._Telerik_IE9 span.riSingle
{
    overflow:hidden;
}

Also, I highly recommend you to set the width by using the property WrapperCssClass instead the CssClass.

I hope this helps

Kind regards,
Galin
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.
Tags
General Discussions
Asked by
SteveV
Top achievements
Rank 1
Answers by
Galin
Telerik team
Share this question
or