Approved
Last Updated: 15 Feb 2018 11:13 by ADMIN
ADMIN
Peter Milchev
Created on: 15 Feb 2018 11:03
Category: SearchBox
Type: Feature Request
0
Improve RadSearchBox screen side boundary detection
When the SearchBox is on the right side of the screen and the dropdown width is larger than the SearchBox width, the dropdown goes outside the viewport:
Actual: https://www.screencast.com/t/4SoNcRCj
Expected/fixed: https://www.screencast.com/t/smfPgy767M

Workaround: 

<script>
    function OnClientLoad(sender, args) {
        sender._dropDown.on({ "reflowed": sender._onReflowed }, sender)
    }

    Telerik.Web.UI.RadSearchBox.prototype._onReflowed = function () {
        var that = this;
                       
        var $animationContainer = $(that._dropDown._animationContainer);

        if (that._enableScreenBoundaryDetection) {
            var availableSpace = that._dropDown._getAvailableSpace();
            var tableWidth = $(that._innerWrapElement).outerWidth();
            var dropDownWidth = $animationContainer.outerWidth();
            var overflow = dropDownWidth - (tableWidth + availableSpace.right);

            if (overflow > 0) {
                var left = parseInt($animationContainer.css("left"), 10);
                var newLeft = Math.max(left - overflow, left - (dropDownWidth - tableWidth));

                $animationContainer.css("left", newLeft);
            }
        }
    }
</script>
<telerik:RadSearchBox runat="server" ID="RadSearchBox1"
    DataTextField="ShipName" OnClientLoad="OnClientLoad" DropDownSettings-Width="500px" DataValueField="OrderID">        
</telerik:RadSearchBox>
0 comments