Blurred not clear text in Disabled Combobox

[Nasiem]

Hi Team,
I have a problem with the combo boxes i'm using. Whenever i disable the comboboxes the text inside them becomes blurry and not clear. If i place the mouse over the combobox the text becomes fine. But if i move the mouse a way from the combobox it becomes blurry and not clear again.
Is this a defect in the  Telerik component i'm using?  Could you help please.
Thanks,

[Veronica]

Hi Nasiem ,

I've made an example for you with two combos. First is disabled via Enabled="false".

<telerik:RadComboBox ID="RadComboBox1" runat="server" Enabled="false">

Second one is disabled via Javascript on pageLoad:

<script type="text/javascript">
    function pageLoad()
    {
     var combo = $find("<%= RadComboBox2.ClientID %>");
     combo.disable();
    }

Both are working without blurring the text of the combo. You may try the attached example in the .zip file.

If this does not helps could you please tell us what skin are you using?


Regards,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Nasiem]

Hi
Thanks for your reply. I'm using the Outlook skin. I'm disabling the combos within the C# code.
here is the html code for one of the combos

 

<telerik:RadComboBox ID="RadComboLimitedChargeCurrecny" runat="server" BorderStyle="None" CssClass="CurrencyGridEditor" DropDownWidth="55px" EnableScreenBoundaryDetection="False" EnableTheming="True" Skin="Outlook" Width="55px"> <collapseanimation duration="200" type="InOutQuint" /> </telerik:RadComboBox>

 

  

 

 

 

in C# i say RadComboLimitedChargeCurrecny.enabled="false"
Also find attached an image of how the combos look on disabling them. I also want to mention that when i place the mouse over the disabled combo the text changes and becomes fine when i move the mouse away it changes back to be blurry as it apperas in the image attached. 
This started to happen after i upgraded my component from Q3 2008 to Q3 2009. It didn't use to happen with 2008 version. 
Thanks,
Nasiem 

 

[Veronica]

Hello Nasiem ,

 The problem probably comes by the fact that we have made a facelift in our controls in Q1 2009 and to use the Q3 2008 skins with the newer assembly you need to do some conversion. It is described here.

Let us know if it helps.

Greetings,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Nasiem]

Hi Veronica
I tried what you have suggested in your reply and the problem was not solved. I event bought the License for Q1 2010 me thinking this will solve the problem but it is still happening in the 2010 version I feel i lost $800 on the developer license on the 2010 version for nothing. I didn't need the 2010 version honestly. But I’m disparate to solve the issue before my next release to the client on Aril 12th . So that I bought the license for the Q1 2010 and i thought this could solve the issue but it didn’t.

Thanks,

Nasiem

[Veronica]

Hello Nasiem ,

We are sorry for your trouble and will try to help you as soon as possible. To do that - could you please attach the full project (or a sample page) you are having problems with so we can inspect it carefully and be able to track down the problem.

Thank you!

All the best,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Nasiem]

Hi Veronica,
Thanks for your reply. I found the cause for the problem. The problem happens when i have the RadStyleSheetManager and RadFormDecorator referenced in my project. If i remove them the ComboBox behaves correctly. So that I created a project for you simulates the way I’m using the ComboBox in my project. I couldn't attach the project file because it is .zip file. In the default.aspx page RadStyleSheetManager and RadFormDecorator are included. If you run the project while these two managers included the text in the combobox becomes blurred. If you remove these two managers the combobox displays correctly
Regards,
Nasiem

[Veronica]

Hi Nasiem ,

I've tested the scenario you described with adding a RadStyleSheetManager and a RadFormDecorator in one page with the RadComboBox but still no blurring appears. The version I use is the same as you described -> 2010.1.309. I've attached the full code as a .zip file.

Please take a look at my project and let me know if I am missing something important in reproducing the issue.

Greetings,
Veronica MIlcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Nasiem]

Hi Veronica
To get the blurred disabled combo box do th followings:
1. Create a project with default page as you did in the project you sent me
2. Create a web user control.
3. Add the combobox on the usercontrol and populate it with data then disable it using code
4. In the default.aspx page add the managers,radscriptmanager, radwindowmanager, radskinmanager, radstylesheetmanager, radformdecorator
 5. register the webusercontrol in default.aspx page (add the user control onto the default aspx page)
6. run the project and you will get the blurred combo box.
if you remove the radstylesheetmanager and radformdecorator the combo works fine.
Please find attached a screenshot of a combo created as described above and you can see how the text in the combobox is not displayed correctly. I tried to attach the project as a zipped file but i can attach images only.
thanks,
Nasiem
 

[Veronica]

Hi Nasiem ,

Thanks for reporting this.

Now I was able to reproduce the problem. We'll investigate this further and you will get an answer next week.

Best wishes,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jack Liao]

Hi
I am also encountered the same problem, after I added a radformdecorator a below.
Telerik.Web.UI.dll (2010.1.309.35) and Telerik.Web.Design.dll (2010.1.309.35)

<telerik:radformdecorator id="FormDecorator1" runat="server" DecoratedControls="all" Skin="Windows7"></telerik:radformdecorator>

and I have a fewer radcombox on same page, but just only one radcombox has blurred in disabled mode. but others is working fine. it is really weird!

this is blurred combobox.

<telerik:RadComboBox ID="cmbCompCat" Runat="server" AllowCustomText="True"
DropDownWidth="330px" Font-Size="11px" HighlightTemplatedItems="True"
OnItemsRequested="cmbCompCat_ItemsRequested" Skin="Windows7" Width="120px">
<ItemTemplate><table cellpadding="0" cellspacing="0" style="width: 300px"><tr>
<td style="width: 80px;"><%#DataBinder.Eval(Container, "Text")%> </td>
                <td style="width: 220px;"><%#DataBinder.Eval(Container, "Attributes['Desc']")%> </td></tr>
                </table>
                </ItemTemplate>
                <collapseanimation duration="200" type="OutQuint" />
                <HeaderTemplate>
                <table cellpadding="0" cellspacing="0" style="width: 300px"><tr><td style="width: 80px;">Code</td><td style="width: 220px;">Description</td></tr></table>
                </HeaderTemplate>
                </telerik:RadComboBox>

This one working fine.

<telerik:RadComboBox ID="cmbHawbType" Runat="server" DropDownWidth="330px" 
Font-Names="Verdana" Font-Size="11px" HighlightTemplatedItems="True" 

onclientselectedindexchanged="changeHawbTypeProcNew" 
Skin="Vista" Width="120px">
<collapseanimation duration="200" type="OutQuint" />
<HeaderTemplate><table cellpadding="0" cellspacing="0" style="width: 300px"><tr><td style="width: 80px;">Type</td><td style="width: 220px;">Description</td></tr></table></HeaderTemplate>
<ItemTemplate><table cellpadding="0" cellspacing="0" style="width: 300px"><tr><td style="width: 80px;"><%#DataBinder.Eval(Container, "Text")%> </td><td style="width: 220px;"><%#DataBinder.Eval(Container, "Attributes['Desc']")%> </td></tr></table></ItemTemplate>
</telerik:RadComboBox>

I have no idea what is happen, but after I amend it as below, it is working fine! so, all my done is add Font-Names="Verdana" and remove Width="120px" and then add it again then the problem was solved!

<telerik:RadComboBox ID="cmbCompCat" Runat="server"  DropDownWidth="330px" Font-Names="Verdana" Font-Size="11px" HighlightTemplatedItems="True"
OnItemsRequested="cmbCompCat_ItemsRequested" Skin="Windows7" Width="120px" >
<ItemTemplate><table cellpadding="0" cellspacing="0" style="width: 300px"><tr><td style="width: 80px;"><%#DataBinder.Eval(Container, "Text")%> </td>

                <td style="width: 220px;"><%#DataBinder.Eval(Container, "Attributes['Desc']")%> </td></tr></table></ItemTemplate>
<collapseanimation duration="200" type="OutQuint" />
<HeaderTemplate><table cellpadding="0" cellspacing="0" style="width: 300px"><tr><td style="width: 80px;">Code</td><td style="width: 220px;">Description</td></tr></table></HeaderTemplate>
</telerik:RadComboBox>

Thanks.
Jack

[Veronica]

Hi Jack Liao,

Please accept my apologies for the late reply.

The reason for blurred text is that RadFormDecorator adds an opacity = "0.5" to disabled RadComboBox. This is fixed in Service Pack 2. If upgrade is not an option for you - set the opacity to "1" as a workaround:

.rfdTextbox input[type="text"][disabled]
       {
           opacity: 1 !important;
       }

Hope this helps.

All the best,
Veronica Milcheva
the Telerik team

[dhuss]

It appears this bug has crept back in to your skins. I am using Telerik.web.ui & telerik.web.ui.skins version 2011.3.1305.35. If I have a form decorator loaded on a page and disable a radComboBox, the text is very blurry. If I remove the form decorator, then the disabled text is clear. I tried this with the Hay, Vista and Default skins. All have the same effect. I tried your css fix and the form decorator appears to override it, even though it is set as !important.

Update. I found if you have the textbox as a decorated control for the form decorator the blur occurs. If you remove textbox, then the blur goes away.

[Ivana]

Hello Dennis,

Here is what I have tested locally:

<style type="text/css">
    .rfdCombo input[type="text"][disabled]
   {
       opacity: 1 !important;
       color: Red !important;;
   }
</style>

<telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all"
    Skin="Default"></telerik:RadFormDecorator>
<telerik:RadComboBox ID="RadComboBox1" runat="server" AllowCustomText="True"
    Font-Size="11px" Skin="Default"
    Enabled="false" EmptyMessage="empty message" CssClass="rfdCombo">
    <Items>
        <telerik:RadComboBoxItem Text="item1" />
    </Items>
</telerik:RadComboBox>

The CSS is applied perfectly and the input is styled according to the CSS rules defined.

If this is not what you meant, please send us a sample page with the issues isolated in it so we will be able to troubleshoot the problem locally.

Regards,
Ivana
the Telerik team