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>