Checkbox problem with Opera

11 posts, 0 answers
  1. AB
    AB avatar
    23 posts
    Member since:
    Jan 2010

    Posted 11 Oct 2011 Link to this post

    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
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 12 Oct 2011 Link to this post

    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
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. AB
    AB avatar
    23 posts
    Member since:
    Jan 2010

    Posted 13 Oct 2011 Link to this post

    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
  5. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 14 Oct 2011 Link to this post

    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
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  6. AB
    AB avatar
    23 posts
    Member since:
    Jan 2010

    Posted 14 Oct 2011 Link to this post

    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
  7. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 17 Oct 2011 Link to this post

    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
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  8. AB
    AB avatar
    23 posts
    Member since:
    Jan 2010

    Posted 17 Oct 2011 Link to this post

    Hello Bozhidar,
    is it possible to make the checkbox work without a product upgrade?
    Many thanks
    Alberto
  9. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 17 Oct 2011 Link to this post

    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
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  10. AB
    AB avatar
    23 posts
    Member since:
    Jan 2010

    Posted 17 Oct 2011 Link to this post

    OK Bozhidar,
    I'm
    waiting for your answer with confidence and trepidation.
    Alberto
  11. Niko
    Admin
    Niko avatar
    387 posts

    Posted 19 Oct 2011 Link to this post

    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
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  12. AB
    AB avatar
    23 posts
    Member since:
    Jan 2010

    Posted 20 Oct 2011 Link to this post

    Hello Niko,
    great code snippet!
    Thank you very much indeed!
    Ciao
    Alberto
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017