Checkbox problem with Opera

[AB]

Hello,
when I click on button "Nuovo"  and then on checkbox "Attiva", nothing happens.
 
URL
http://www.swistel.ch/gestione/liste_distribuzione.aspx
 
DLL VERSION
14.1.2010
 
I would like to use my dll version without making an upgrade.
 
Thank you
 
Alberto

[Niko]

Hello Alberto,

The check appears to be working just fine. The same behavior is reproducible in all browsers. The difference is that Opera is so fast in rendering the ajax postback from the server that the user cannot see the change or acknowledge it. Please, cancel the auto postback of the checkbox in order to see that the checkbox is indeed checked.

Hope this helps.

Kind regards,
Niko
the Telerik team

[AB]

Hello Niko,
many thanks for your reply.
I've removed the AutoPostBack from the CheckBox, but it still doesn't work (Opera 11.51, Windows Vista);
with other browsers the problem is not present.
I'm using the following css code to decorate the CheckBox:

.RadForm_MioSkin .rfdCheckboxUnchecked,
.RadForm_MioSkin .rfdInputDisabled.rfdCheckboxUnchecked:hover
{
background: transparent url('FormDecorator/CheckBoxSprites.gif') no-repeat 0 0;
}
.RadForm_MioSkin .rfdCheckboxUnchecked:hover
{
background: transparent url('FormDecorator/CheckBoxSprites.gif') no-repeat 0 -200px;
}
.RadForm_MioSkin .rfdCheckboxChecked,
.RadForm_MioSkin .rfdInputDisabled.rfdCheckboxChecked:hover
{
background: transparent url('FormDecorator/CheckBoxSprites.gif') no-repeat 0 -420px;
}
.RadForm_MioSkin .rfdCheckboxChecked:hover
{
background: transparent url('FormDecorator/CheckBoxSprites.gif') no-repeat 0 -640px;
}
@media screen and (-webkit-min-device-pixel-ratio: 0)
{
.rfdCheckbox input[type="checkbox"],
.rfdCheckbox input[type="checkbox"][disabled]:hover
{
background-image: url('FormDecorator/CheckBoxSprites.gif');
margin-left: 0px;
margin-top: 0px;
}
}

What am I doing wrong?
Thank you
Alberto

[Bozhidar]

Hi Alberto,

I think in Q3 2010 we have changed the checkbox and radiobuttons sprites of RadFormDecorator in order to improve the UI experience. Actually we have added to more sates in the sprites - Disabled checkbox checked and Disabled checkbox unchecked for checkboxes and Diasabled RadioButton checked and Disabled RadioButton unchecked for the RadioButtons. Also we have removed all base styles related to these elements from Skin specific CSS files to Base stylesheet. Now the Skins specific Default skin looks like that:

/* Decorate <input type="checkbox" /> */
.RadForm_Default .rfdCheckboxUnchecked,
.RadForm_Default .rfdCheckboxChecked,
.RadForm_Default .rfdInputDisabled.rfdCheckboxUnchecked,
.RadForm_Default .rfdInputDisabled.rfdCheckboxChecked
{
    background-image: url('<%=WebResource("Telerik.Web.UI.Skins.Default.FormDecorator.CheckBoxSprites.gif")%>');
}

/* Decorate <input type="radio" /> */
.RadForm_Default .rfdRadioUnchecked,
.RadForm_Default .rfdRadioChecked,
.RadForm_Default .rfdInputDisabled.rfdRadioUnchecked,
.RadForm_Default .rfdInputDisabled.rfdRadioChecked
{
    background-image: url('<%=WebResource("Telerik.Web.UI.Skins.Default.FormDecorator.RadioButtonSprites.png")%>');
}

/* IE6 - we set .gif")%> image instead of .png")%> due to the lack RGBA support */
.RadForm_Default .rfdRadioUnchecked,
.RadForm_Default .rfdInputDisabled.rfdRadioUnchecked:hover,
.RadForm_Default .rfdRadioUnchecked:hover,
.RadForm_Default .rfdRadioChecked,
.RadForm_Default .rfdInputDisabled.rfdRadioChecked:hover,
.RadForm_Default .rfdRadioChecked:hover
{
    _background-image: url('<%=WebResource("Telerik.Web.UI.Skins.Default.FormDecorator.RadioButtonSprites.gif")%>'); /* IE6 hack */
}

And Base Stylesheet:

.rfdCheckboxChecked,
.rfdCheckboxUnchecked,
.rfdRadioUnchecked,
.rfdRadioChecked
{
    line-height: 20px !important;
    padding: 0 0 0 20px !important;
    zoom: 1; /* IE font-size fix when set in percent */
    display: inline-block !important;
    background-color: transparent;
    background-repeat: no-repeat;
}

/* Checkboxes and Radios Sprite Positions */
/* Decorate <input type="checkbox" /> */
.rfdCheckboxUnchecked
{

    background-position: 0 0;
}

.rfdCheckboxUnchecked:hover
{
    background-position: 0 -200px;
}

.rfdCheckboxChecked
{
    background-position: 0 -420px;
}

.rfdCheckboxChecked:hover
{
    background-position: 0 -640px;
}

.rfdCheckboxUnchecked.rfdInputDisabled,
.rfdCheckboxUnchecked.rfdInputDisabled:hover
{
    background-position: 0 -860px;
}

.rfdCheckboxChecked.rfdInputDisabled,
.rfdCheckboxChecked.rfdInputDisabled:hover
{
    background-position: 0 -1080px;
}

/*IE6 Disabled Checkboxes fix*/
*html .rfdCheckboxUnchecked
{
    background-position: 0 0;
}

*html .rfdCheckboxChecked:hover
{
    background-position: 0 -640px;
}

/* Decorate <input type="radio" /> */
.rfdRadioUnchecked
{
    background-position: 1px 0;
}

.rfdRadioUnchecked:hover
{
    background-position: 1px -220px;
}

.rfdRadioChecked
{
    background-position: 1px -440px;
}

.rfdRadioChecked:hover
{
    background-position: 1px -640px;
}

.rfdRadioUnchecked.rfdInputDisabled,
.rfdRadioUnchecked.rfdInputDisabled:hover
{
    background-position: 1px -860px;
}

.rfdRadioChecked.rfdInputDisabled,
.rfdRadioChecked.rfdInputDisabled:hover
{
    background-position: 1px -1080px;
}

/* IE6 Radio Disabled fix */
*html .rfdRadioUnchecked
{
    background-position: 1px 0;
}

*html .rfdRadioChecked
{
    background-position: 1px -440px;
}

And if your custom skin - MioSkin - was created before that fix, and it is ran with our latest release, it is possible to have some problems, as your old sprites does not fit the new improved CSS.

You could find attached RadioButtonSprites.png and CheckBoxSprites.gif - to compare it with your custom skin sprites. If the last two states in sprites are missing, then that should be the problem. You could also try to run your application with any of the embedded Telerik skins, such as Default, to check if the problem still exists. If it works as expected with the embedded skins, then you have to modify a little your custom skin. Just add the disabled states in your sprites and replace your custom CSS code with the new one, provided above.

Best wishes,
Bozhidar
the Telerik team

[AB]

Hello Bozhidar,
many thanks for your reply, but the fact is that I'm using the release with date 14.1.2010,
and that I can't update it at the moment.
I have noticed that the problem arised after the last Opera update.
It is also interesting the fact that I can uncheck the field "Attiva", but not check it again.
Please help me.
Alberto

[Bozhidar]

Hi Alberto,

You are using  Q3 2009, Service Pack 1, released on 14 Jan 2010. This is nine months ago and we did not have support for the latest Opera browser released on 13 Oct  2011 (as for other browsers released after Telerik release from 14 Jan 2010). My advice is to update to the latest release - Q2 2011 Service Pack 1, 15 Sept 2011. With that release the checkbox problem in Opera does not exists, and also a lot of of other issues has been fixed.

Regards,
Bozhidar
the Telerik team

[AB]

Hello Bozhidar,
is it possible to make the checkbox work without a product upgrade?
Many thanks
Alberto

[Bozhidar]

Hi Alberto,

I don`t think that this is possible, usually we fix issues in our latest releases for the newer browsers, but not for releases when the newer browsers was not released yet. If during the Telerik release period Opera browser was working as expected with the checkboxes, then we consider that there isn`t any issue to be fixed. We are focused to provide working controls for all already released major browsers, and can not fix past control version, as if it is necessary the fix will be provided with the next official release of our product.

I will ask the RadFormDecorator devloper if he could provide fast and easy to be implemented fix for that issue, but I do not grantee that it will gonna happen.

Regards,
Bozhidar
the Telerik team

[AB]

OK Bozhidar,
I'm waiting for your answer with confidence and trepidation.
Alberto

[Niko]

Hello Alberto,

Please, try the following code snippet as a workaround to your issue:

Telerik.Web.UI.RadFormDecorator.prototype.decorateInput = function (b) {
    var a = b.nextSibling;
    if (a == null || a.tagName == null || a.tagName.toLowerCase() != "label") {
        a = this.addLabel(b);
    }
    this.configureLabel(a, b);
    if ($telerik.isIE) {
        $addHandler(b, "propertychange", Function.createDelegate(this, this.inputPropertyClickHandler));
        $addHandler(b, "click", Function.createDelegate(this, this.inputClickHandler));
    } else {
        $addHandler(b, "click", Function.createDelegate(this, this.inputClickHandler));
    }
    this._addToDecoratedElements(b);
};

Hope this helps.

All the best,
Niko
the Telerik team

[AB]

Hello Niko,
great code snippet!
Thank you very much indeed!
Ciao
Alberto