ToolBar Drop Down Extends Past Edges of Web Pag

6 posts, 0 answers
  1. Tim Withers
    Tim Withers avatar
    1 posts
    Member since:
    Oct 2012

    Posted 29 Mar 2010 Link to this post

    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.
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 31 Mar 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. marc
    marc avatar
    2 posts
    Member since:
    Sep 2013

    Posted 07 Sep 2014 in reply to Yana Link to this post

    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.
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 10 Sep 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. marc
    marc avatar
    2 posts
    Member since:
    Sep 2013

    Posted 10 Sep 2014 in reply to Boyan Dimitrov Link to this post

    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.
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 15 Sep 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017