Completed
Last Updated: 07 Jun 2019 07:52 by ADMIN
ADMIN
Vessy
Created on: 29 Oct 2018 13:21
Category: FormDecorator
Type: Bug Report
6
Duplicated Checkboxes in Firefox 63
The checkboxes decorated with RadFormDecorator appeared double in Classic rendering after upgrading to Firefox 63.

Steps to reproduce:
1. Upgrade to Firefox 63
2. Run the following setup
        <telerik:RadFormDecorator runat="server" DecoratedControls="CheckBoxes" RenderMode="Classic" />
        <div>asp:Checkbox</div>
        <asp:CheckBox ID="chkApproved" runat="server" Text="asp:Checkbox" />

        <div>Html Input</div>
        <input id="chkApproved1" type="checkbox" name="chkApproved" />

======================================

Solutions found so far:
1) Use RadFormDecorator in Lightweight RenderMode:
     <telerik:RadFormDecorator runat="server" RenderMode="Lightweight"/>

2) Set the RadFormDecorator's DecoratedControls="All":
     <telerik:RadFormDecorator runat="server" RenderMode="Classic" DecoratedControls="All"  />

3) Set the ControlsToSkip="CheckBoxes"
      <telerik:RadFormDecorator runat="server" RenderMode="Classic" ControlsToSkip="CheckBoxes"  />

4) Or add the following CSS overwrite to the page:
        <style>
           .rfdCheckboxUnchecked, .rfdCheckboxChecked {
               padding: 0 !important;
               background-image: none !important;
           }
       </style>
20 comments
ADMIN
Vessy
Posted on: 07 Jun 2019 07:28
Hi guys,

As the behavior of Firefox is stable as of version 65, we decided to include the fix provided in the Peter's latest post in the source code of the controls. The fix discussed in this item will remain working if you are using Firefox 63, but not in the newer versions of the browser:

https://feedback.telerik.com/aspnet-ajax/1412298-missing-checkboxes-and-radio-buttons-in-firefox-65

Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
ADMIN
Peter Milchev
Posted on: 15 Mar 2019 09:09
Hello guys,

I am sorry to say that FireFox 65 again changed its behavior and breaks the behavior of the Service Pack release. Luckily, now the versions prior R1 2019 SP1 are working properly in FireFox.

Fortunately, we have an additional temporary workaround you can use for the R1 2019 SP1 to work properly in FireFox 65: 

<style>
    .t-ff input[type=checkbox].rfdRealInput,
    .t-ff input[type=radio].rfdRealInput {
        position: static;
    }
</style>

We will keep monitoring the behavior of checkboxes in the upcoming versions and update the internal behavior so that the controls work flawlessly in all the new browser versions.

Regards,
Peter Milchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
ADMIN
Vessy
Posted on: 14 Feb 2019 10:06
Hi,

Thanks a lot for the feedback, Mark, we hope the fix is working well for the other clients as well. Please, let us know should any problem related to this bug remains, so we can handle it before the official release.

Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Mark
Posted on: 12 Feb 2019 14:04

I have verified that Telerik_UI_for_ASP.NET_AJAX_2019_1_211_Dev_hotfix.zip  does fix this issue in my situation.  I've posted a before and after screenshot. Thanks for your hard work resolving this.

-Mark

Attached Files:
ADMIN
Vessy
Posted on: 12 Feb 2019 08:58
Hi guys,

We are glad to share that we have released a Latest Internal Build including a fix for the issue discussed in this thread. You can download it from here and give it a try:


We will appreciate any feedback you have on the improved behavior of the FormDecorator.

Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
ADMIN
Rumen
Posted on: 21 Dec 2018 08:52
Hi Mark and Daniel,

Please excuse me for the miscommunication!

Actually I need a repro for the following report for Chrome:
Daniel: I'm having the problem even with RenderMode="Lightweight", with this RenderMode, the problem also occurs in Chrome.

The issues in Firefox is already approved as a bug.

Right now I am interested in reproducing the problem in Chrome so that we can fix it too.



Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Mark
Posted on: 17 Dec 2018 15:00
I've put together a sample project that allows you to reproduce the error.  Note this is not the only way that it can be reproduced, but i suspect that if you fix this you will fix it everywhere.  This example demonstrates the issue with check boxes and with radio buttons.  You will need to add the Telerik.Web.UI and Telerik.Web.UI.Skins dll's to run this project.

Steps used to create this project.
1. Create a new ASP.Net WebForms App in VS.Net with all default settings
2. Add references for Telerik Web UI and Telerik Web UI Skins Assemblies
3. Add minimal references to web.config for Telerik to work. 
4.  Add the Telerik Form Decorator to the Site.Master

        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" RenderMode="Classic" />

5. Modify the default.aspx page to add 2 repeaters, one displaying a list of asp:checkboxes  and one displaying a list of asp:RadioButtons.
6. Run the project in Firefox Version 63 or higher (I've verified that the issue still exists in version 64, but it does not happen in versions < 63).

Output screenshot is attached.  The default website created by VS.Net is quite bloated so i can't upload it here (file > 10MB). But i wanted to include it to show how easy this is to replicated. It's can be replicated in a default website  with minimal work.  These changes can be made in < 5 minutes.  So instead of attaching the project here, I've uploaded it to an Azure file share:  

https://mdk8804.blob.core.windows.net/uploads/CheckBoxTest.zip 

HTH
-Mark
Attached Files:
Mark
Posted on: 17 Dec 2018 12:18
So not trying to be too Captain Obvious Rumen, but the ticket clearly says the issue is in FireFox v63+.  As you have noted there is no issue in Chrome.  
Attached Files:
ADMIN
Rumen
Posted on: 17 Dec 2018 10:04
I am afraid that the problem is not reproducible on my side: https://www.screencast.com/t/M1rUKAVE .
Mark
Posted on: 13 Dec 2018 17:08
This is very easy to replicate:

https://demoqa.eadoptonline.com/checkboxtest.aspx

ADMIN
Rumen
Posted on: 13 Dec 2018 16:14
Daniel, can you please open a support ticket and send a simple runnable project where the problem can be reproduced with the latest R3 2018 version of the controls?
Daniel
Posted on: 16 Nov 2018 14:00
I'm having the problem even with RenderMode="Lightweight", with this RenderMode, the problem also occurs in Chrome.
Daniel
Posted on: 16 Nov 2018 13:53
deleted by the.milak
M Kumar
Posted on: 12 Nov 2018 05:39
Hi,
   If add styles which mention above, in IE all controls not appear,
IE screenshot  - http://prntscr.com/lh7p91
Fire Fox - duplicate controls removed but i got square boxes with letters screenshot -http://prntscr.com/lh7pyv

this is style code 
    <style>
           .rfdCheckboxUnchecked, .rfdCheckboxChecked {
               padding: 0 !important;
               background-image: none !important;
           }

.rfdRadioUnchecked, .rfdRadioChecked {
padding: 0 !important;
background-image: none !important;
}
       </style>
mmbm
Posted on: 03 Nov 2018 15:28
Suggestion by Roman BAUER using @-moz-document url-prefix() does not work for checkboxes in a RadComboBox.  It causes the text and checkbox to overlap. See the attached file.
Attached Files:
mmbm
Posted on: 31 Oct 2018 15:51
#4 - the style to hide the background image, causes the checkboxes to disappear completely in Internet Explorer.
Roman
Posted on: 30 Oct 2018 07:19
this also works:
@-moz-document url-prefix() {
            .rfdRadio input[type="radio"], .rfdCheckbox input[type="checkbox"] {
	            position: fixed !important;
            }

        }
Maveric
Posted on: 29 Oct 2018 17:29
For radio button you can use
.rfdRadioUnchecked, .rfdRadioChecked {
padding: 0 !important;
background-image: none !important;
}
ADMIN
Vessy
Posted on: 29 Oct 2018 17:16
Thank you for the feedback, Mark - I have updated the bug item, so we will check the radio buttons style as well.

Vessy
Mark
Posted on: 29 Oct 2018 14:04
Thanks for looking into this.  Please note that this problem also exists with Radio Buttons as well as check boxes.  

-Mark