Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadInput breaks when inside jScrollPane using Chrome and Firefox

1 Answer 31 Views
Input
This is a migrated thread and some comments may be shown as answers.
CK
Top achievements
Rank 1
CK asked on 05 Mar 2012, 05:48 PM
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>

1 Answer, 1 is accepted

Sort by
0
Accepted
Galin
Telerik team
answered on 08 Mar 2012, 03:11 PM
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.
Tags
Input
Asked by
CK
Top achievements
Rank 1
Answers by
Galin
Telerik team
Share this question
or