RadInput breaks when inside jScrollPane using Chrome and Firefox

2 posts, 1 answers
  1. CK
    CK avatar
    7 posts
    Member since:
    Jul 2009

    Posted 05 Mar 2012 Link to this post

    Hi there,

    I am using jScrollPane (http://jscrollpane.kelvinluck.com/) for one of my project.

    Whenever the scroller from jScrollPane is showing, none of the RadInput (RadTextBox, RadDateTimePicker) is selectable. It is like they are being disabled.

    But if I am using the regular ASP.NET TextBox, this issue doesn't happen.

    This only happens when i am using Chrome and FireFox. On IE 9, it works fine.

    Below is the code i use to demonstrate the problem. The first DIV will show the scroller, the second DIV won't show the scroller. In the first DIV, I can't type anything to the RadTextBox, but on the normal TextBox, it is working.

    On the second DIV, where the scroller is not showing, both textbox are working.

    Thanks.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            html, body, form
            {
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
                overflow: hidden;
                color: #555555;
            }
            .left-scroll, .pane-scroller
            {
                outline: none !important;
            }
             
            .jspContainer
            {
                overflow: hidden;
                position: relative;
            }
             
            .jspPane
            {
                position: absolute;
            }
             
            .jspVerticalBar
            {
                position: absolute;
                top: 0;
                right: 0;
                width: 16px;
                height: 100%;
                border: 1px solid #999;
                border-right: 0px;
            }
             
            .jspHorizontalBar
            {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 16px;
            }
             
            .jspVerticalBar *, .jspHorizontalBar *
            {
                margin: 0;
                padding: 0;
            }
             
            .jspCap
            {
                display: none;
            }
             
            .jspHorizontalBar .jspCap
            {
                float: left;
            }
             
            .jspTrack
            {
                background: #fff;
                position: relative;
                border-top: 1px solid #999;
                border-bottom: 1px solid #999;
            }
             
            .jspDrag
            {
                background: #666;
                background: #8DBB40;
                position: relative;
                top: 0;
                left: 0;
                cursor: pointer;
                border-top: 1px solid #999;
                border-bottom: 1px solid #999;
            }
             
            .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag
            {
                float: left;
                height: 100%;
            }
             
            .jspArrow
            {
                background: #50506d;
                text-indent: -20000px;
                display: block;
                cursor: pointer;
            }
             
            .jspArrow.jspDisabled
            {
                cursor: default;
                background: #80808d;
            }
             
            .jspVerticalBar .jspArrow
            {
                height: 16px;
            }
             
            .jspHorizontalBar .jspArrow
            {
                width: 16px;
                float: left;
                height: 100%;
            }
             
            .jspVerticalBar .jspArrow:focus
            {
                outline: none;
            }
             
            .jspCorner
            {
                background: #eeeef4;
                float: left;
                height: 100%;
            }
             
            /* Yuk! CSS Hack for IE6 3 pixel bug :( */
            * html .jspCorner
            {
                margin: 0 -3px 0 0;
            }
             
            .jspArrowUp, .jspArrowUp.jspDisabled
            {
                background-color: #c0c0c0;
                background-position: 1px 0px !important;
            }
             
            .jspArrowDown, .jspArrowDown.jspDisabled
            {
                padding-bottom: 2px;
                background-color: #c0c0c0;
                background-position: -64px 0 !important;
            }
             
            .jspArrowLeft, .jspArrowLeft.jspDisabled
            {
                background-color: #c0c0c0;
                background-position: -96px 0 !important;
            }
             
            .jspArrowRight, .jspArrowRight.jspDisabled
            {
                background-color: #c0c0c0;
                background-position: -32px 0 !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="TestRadScriptManager" runat="server">
        </telerik:RadScriptManager>
        <div class="pane-scroller" style="width: 100%; height: 100px;">
            <telerik:RadTextBox ID="tbRetypePassword" runat="server" Width="200px">
            </telerik:RadTextBox>
            <asp:TextBox ID="TextBox1" runat="server" Text="aasaasasd"></asp:TextBox>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
            <div class="pane-scroller" style="width: 100%; height: 500px;">
            <telerik:RadTextBox ID="RadTextBox1" runat="server" Width="200px">
            </telerik:RadTextBox>
            <asp:TextBox ID="TextBox2" runat="server" Text="aasaasasd"></asp:TextBox>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function ($) {
                ReloadScroller();
            });
            function ReloadScroller() {
                $(function () {
                    $('.pane-scroller').jScrollPane(
                    {
                        showArrows: true,
                        horizontalGutter: 10
                    }
                    );
                });
            }
        </script>
        </form>
    </body>
    </html>

  2. Answer
    Galin
    Admin
    Galin avatar
    526 posts

    Posted 08 Mar 2012 Link to this post

    Hello Chen,

    The issue is replicated on our side. Therefore, I will forward it to our developers so they could further investigate this bug and researched on its possible resolution. In the meantime, could you use the following JS workaround. Place the source after the ScriptManager

    if(Telerik.Web.UI.RadDatePicker)
    {
        Telerik.Web.UI.RadDatePicker.prototype._onDateInputFocusHandler = function (sender, args)
        {
            if(this._calendar && this.get_showPopupOnFocus())
            {
                this.showPopup();
            }
        }
    }

    Please excuse us for the inconvenience this might cause you.

    Kind regards,
    Galin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top