ToolBar Drop Down Extends Past Edges of Web Pag

[Tim Withers]

I would like to see some extra intelligence in the various Telerik drop-down controls, so that they avoid opening the drop-downs beyond the edges of the browser canvas.  Ideally, the behavior would be similar to the way drop-down boxes avoid crossing the edges of the screen in native windows applications.

In my case, I have RadToolBarSplitButton controls in multiple locations on the page, including close to the bottom of the page, and close to the right-hand edge of the page.  I am using the default ExpandDirection of Down.  This is a problem for the controls near the bottom of the page, because some of the drop-down items are rendered below the bottom edge of the browser window.  I am using EnableDefaultButton = false, and the text for some of the items is longer than the text on the RadToolBarSplitButton.  This is a problem for the controls near the right-hand edge of the page, because some of the drop-down is rendered beyond the right-hand edge of the browser window.  In both cases, the browser scroll bars extend to provide access to the rendered content beyond the previous edges of the canvas, but as soon as you click in the scroll bar to see the rest of the drop-down, the drop-down loses focus and collapses.

I am currently using the following javascript as a work-around, making use of the RadToolBar OnClientDropDownOpening and OnClientDropDownOpened events.

var canvasWidth, canvasHeight;

function OnClientDropDownOpening(sender, args) {
// We need to obtain the canvas width and height before the drop-down causes the canvas to expand.
    canvasWidth = document.documentElement.scrollWidth;
    canvasHeight = document.documentElement.scrollHeight;
}

function OnClientDropDownOpened(sender, args) {
    var button = args.get_item();
    var buttonElem = button.get_element();
    var dropDownContainer = button.get_dropDownElement().offsetParent;

    var offsetRight = dropDownContainer.offsetLeft + dropDownContainer.offsetWidth;
    if (canvasWidth < offsetRight)
        dropDownContainer.style.left = (dropDownContainer.offsetLeft - offsetRight + canvasWidth) + "px";

    if (canvasHeight < dropDownContainer.offsetTop + dropDownContainer.offsetHeight)
        dropDownContainer.style.top = (dropDownContainer.offsetTop - dropDownContainer.offsetHeight - buttonElem.offsetHeight) + "px";
}

The expand and collapse animations still think the drop-down is expanding down rather than up, so I have disabled the animations.  If you attempt to use the undocumented set_expandDirection client method to adjust the animation, you will notice that there is an infinite recursion bug in this method in RadToolBarScripts.js.

set_expandDirection:function(){if(this.set_expandDirection()==value){return;

That's obviously meant to be get_expandDirection() in the if statement.

I am using RadControls for ASP.NET AJAX Q1 2010, with an assembly version of 2010.1.309.35.

[Yana]

Hi Tim Withers,

Thank you for sending your feedback about drop-down controls, some of them like RadMenu and RadComboBox have EnableScreenBoundaryDetection property, but you should use a work-around to achieve this with RadToolBar dropdown buttons.  This feature request will be logged and considered.

Regarding set_expandDirection() method - we've already fixed it and it will be available in the next internal build. Thank you for reporting this issue, you can find your points updated.

Regards,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[marc]

Its now 2014 - has the issue with the dropdown been resolved? We are seeing the same issues using v2014.2.618.45 

We have a menu using the toolbar that floats to the right of the page. The right-most item when selected expanded a dropdown that is half off the window canvas.

We dont want to set the toolbar to rtl as that right aligns everything and positions the items in the reverse order. However the rtl setting does make the dropdown render right to left at the right most point of the parent item, which we want.

Any iteas - this is obviously an OLD issue that appears not to have been resolved. I may be wrong but would appreciate a solution.

[Boyan Dimitrov]

Hello,

Could you please clarify whether you have tried the workaround provided in the last response to use  RadToolBar dropdown buttons?  


Regards,
Boyan Dimitrov
Telerik

 

 

[marc]

Tried what workaround? The response just says "use a work around" - not exactly helpful. Also it seems like an issue that should have been resolved by now (4 years later) and part of the build. 

I do wonder at some of the short-comings of many of these components that are simply disregarded. 

Could you please supply a detailed solution as our production solution has a toolbar menu that cant be used. 

Thanks again.

[Boyan Dimitrov]

Hello,

Please find attached a sample project that implements a possible workaround for this case. There is a JavaScript functionality that shifts the drop down with items to the left side. This way the drop down list is not half off cut. There is a disadvantage in this approach since the shifting is hard-coded to static value in pixels.


Regards,
Boyan Dimitrov
Telerik