RadToolbarDropDown - DropdownMenu does not align with window size

2 posts, 0 answers
  1. Peter Lachenmayr
    Peter Lachenmayr avatar
    1 posts
    Member since:
    Aug 2012

    Posted 26 Mar 2013 Link to this post

    Hi,

    we have a Toolbar set up with a RadToolbarDropDown which is aligned to the right. When the DropDown menu opens it is left-aligned with the Button in the Toolbar, but drawn crossing the window border.

    How can we manage that the DropDown Menu does not open to the right but to the left, so that the page is not resized.

    See attached screenshot regarding the problem.

    Kind regards
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 27 Mar 2013 Link to this post

    Hello Peter,

    Unfortunately the RadToolBar control does not support left alignment of the drop down only. However, you can use the following workaround to get the desired functionality:
    function dropdownOpened(sender, args) {
                     var dropDownElem = args.get_item().get_element();
                     var rightPos = $telerik.getLocation(dropDownElem).x + $telerik.getSize(dropDownElem).width;
                     var dropDownElemContainer = args.get_item()._animationContainer;
                     var leftPos = rightPos - dropDownElemContainer.clientWidth;
                     dropDownElemContainer.style.left = leftPos + "px";
                 }

    markup:
    <telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientDropDownOpened="dropdownOpened">
           <Items>
               <telerik:RadToolBarButton runat="server" Text="Button 0">
               </telerik:RadToolBarButton>
               <telerik:RadToolBarButton runat="server" Text="Button 1">
               </telerik:RadToolBarButton>
               <telerik:RadToolBarDropDown runat="server" Text="DropDown 0">
                   <Buttons>
                       <telerik:RadToolBarButton Text="button1"></telerik:RadToolBarButton>
                       <telerik:RadToolBarButton Text="button1"></telerik:RadToolBarButton>
                       <telerik:RadToolBarButton Text="button1"></telerik:RadToolBarButton>
                       <telerik:RadToolBarButton Text="button1"></telerik:RadToolBarButton>
                   </Buttons>
               </telerik:RadToolBarDropDown>
           </Items>
       </telerik:RadToolBar>


    Regards,
    Kate
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top