Button Rendering Issue

3 posts, 0 answers
  1. Brent
    Brent avatar
    8 posts
    Member since:
    Feb 2008

    Posted 06 Aug 2009 Link to this post

    <asp:Button ID="btnHidden" runat="server" style="display:none;" EnableViewState="false" /> 
    I'm not sure if this is a bug in the CSS inheritance of the latest browsers or a bug in the radFormDecorator. The button listed above displays on the screen, even though the inline style should take precedence over all other styles. I'm using a workaround of putting "display:none" in a  CSS class which correctly hides the button (and prevents the radFormDecorator from rendering an anchor around the input element. I'm wondering if this is related to the "Opera hack" in the radFormDecorator's CSS file?
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 07 Aug 2009 Link to this post

    Hi Brent,

    RadFormDecorator's logic does not check the style property of the decorated element - this would made the logic too complex and will lead to bad performance. When you wish to hide such element like the button in your example, we recommend to wrap it in some container - span or div with style=display:none. e.g.:

    <span style="display: none"
        <asp:Button runat="server" ID="Button1" OnClientClick="return false;" /> 
    </span> 


    I hope this helps.



    Best wishes,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. deval
    deval avatar
    6 posts
    Member since:
    Sep 2010

    Posted 13 Jan 2011 Link to this post

    Hi,
    I had the same problem and I didn't want to wrap each button in another div or span.
    An acceptable workaround for me was to add this jquery script in the master page
    $(document).ready(
        function () {
            setTimeout(function () {
     
                /*** FormDecorator bug ***/
                var $skinnedButtons = $(".rfdSkinnedButton");
                for (var idx = 0; idx < $skinnedButtons.length; idx++) {
                    var input = $($skinnedButtons[idx]).find("input");
                    if (input.length == 1) {
                        if ($(input).css("display") == "none") {
                            $($skinnedButtons[idx]).addClass("hide");
                        }
                        else {
                            $($skinnedButtons[idx]).addClass("show");
                        }
                    }
                }
     
            }, 4); // Wait after everything else has been done
        }
    );

    I added a timer to allow the formdecorator some time to complete it's task. It may not be neccessary,
    The only thing left is to add one style to your global css sheet.


    .rfdSkinnedButton.hide
    {
        display: none !important;
    }

    I hope this helps.
Back to Top