Community & Support
Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolBar > Drop Down Alignment

Not answered Drop Down Alignment

Feed from this thread
  • James Brannon avatar

    Posted on Jan 15, 2010 (permalink)

    My toolbar has to be 960 px wide to fix the layout of the page.  The last menu item is a drop down.  Now, depending on the users screen resolution (800X600 and lower would be a problem), the drop down part might be cut off. Is there a way to right align the last menu item so that it stays within the 960 px layout?


    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="Default" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Untitled Page</title> 
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> 
        <link href="App_Themes/Skins/BTSToolBar/ToolBar.BTSToolBar.css" rel="stylesheet" type="text/css" /> 
          
        <script type="text/javascript">  
            function DropDownOpened (sender, args) {  
                var item = args.get_item();  
                var element = item.get_element();  
                var btnColorElement = item.get_linkElement();  
                  
                if (element.className.indexOf('rtbDropDown') >= 0) {  
                      
                    var dropDownList = item.get_dropDownElement();  
                      
                    document.onmousemove = function (e) {  
                            if (!e) e = window.event;  
                            if (!e.target) ee.target = e.srcElement;  
                              
                            if (!$telerik.isDescendantOrSelf(dropDownList, e.target) && !$telerik.isDescendantOrSelf(element, e.target)) {  
                                item.hideDropDown();  
                            }  
                        };  
                }  
            }  
              
            function DropDownClosed(sender, args) {  
                var item = args.get_item();  
                  
                if (item.get_element().className.indexOf('rtbDropDown') >= 0) {  
                    document.onmousemove = function (e) {};  
                }  
            }  
              
            function MouseOverFunction(sender, args) {  
                var item = args.get_item();  
                if(item.get_element().className.indexOf('rtbDropDown') >= 0) {  
                    item.showDropDown();  
                }  
            }  
        </script>      
          
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div> 
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
       
        <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Black">  
        </telerik:RadSkinManager> 
     
        <telerik:RadToolBar runat="server" ID="RadToolBar1" Skin="BTSToolBar" EnableEmbeddedSkins="false" onbuttonclick="RadToolBar1_ButtonClick" OnClientDropDownOpened="DropDownOpened" OnClientDropDownClosed="DropDownClosed" OnClientMouseOver="MouseOverFunction">  
            <Items> 
                 
                <telerik:RadToolBarButton Text="Home" Value="Home" ></telerik:RadToolBarButton> 
                  
                <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton> 
     
                  
                <telerik:RadToolBarDropDown  Text="Salvage Listing">  
                   <Buttons> 
                      <telerik:RadToolBarButton Text="Truck Salvage"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="Trailer Salvage"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="Off-Road Salvage"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="Cargo Salvage"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="Misc Salvage"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="Parts Salvage"></telerik:RadToolBarButton> 
                   </Buttons> 
                </telerik:RadToolBarDropDown> 
     
                <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton> 
                  
                <telerik:RadToolBarDropDown Text="Sell Your Salvage">  
                   <Buttons> 
                      <telerik:RadToolBarButton Text="List a Truck"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="List a Trailer"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="List Off-Road Equipment"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="List Cargo"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="List Misc Equipment"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="List Parts"></telerik:RadToolBarButton> 
                   </Buttons>              
                </telerik:RadToolBarDropDown> 
                  
                <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton> 
                  
                <telerik:RadToolBarDropDown Text="Registration">  
                   <Buttons> 
                      <telerik:RadToolBarButton Text="Buyer Registration"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="Seller Registration"></telerik:RadToolBarButton> 
                   </Buttons> 
                </telerik:RadToolBarDropDown>    
                  
                <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton>            
                  
                <telerik:RadToolBarButton Text="Your Account" Value="Your Account"></telerik:RadToolBarButton> 
                  
                <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton>                
                  
                <telerik:RadToolBarButton Text="Titles Processing" Value="Titles Processing"></telerik:RadToolBarButton> 
                  
                <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton>            
                  
                <telerik:RadToolBarDropDown Text="Help">  
                   <Buttons> 
                      <telerik:RadToolBarButton Text="Buyer's Registration" Value="BR"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="The Bidding Process" Value="TBP"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="Awarding of Salvage" Value="AOS"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="Selling Your Salvage" Value="SYS"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="Your Account" Value="YA"></telerik:RadToolBarButton> 
                      <telerik:RadToolBarButton Text="Frequently Asked Questions" Value="FAQ"></telerik:RadToolBarButton> 
                   </Buttons> 
                </telerik:RadToolBarDropDown>               
                  
     
            </Items> 
        </telerik:RadToolBar>     
          
        <br /> 
        <br /> 
          
        Text: <asp:TextBox ID="TextBox1" runat="server" Text="Starting....">   Value: </asp:TextBox><asp:TextBox ID="TextBox2" runat="server" Text="Starting...."></asp:TextBox> 
          
        </div> 
        </form> 
    </body> 
    </html> 

    /* <RadToolBar / Black> */  
     
    /* <tool wrapper> */  
     
    /* <horizontal> */  
     
    .RadToolBar_BTSToolBar .rtbOuter  
    {  
        border: 1px solid #0e0e0e;  
    }  
     
    .RadToolBar_BTSToolBar .rtbMiddle  
    {  
        border: 1px solid #000;  
        background: #000 url('ToolBar/rtbControlBg.png') repeat-x 0 0;  
    }  
     
    .RadToolBar_BTSToolBar .rtbBtn {}  
     
    /* </horizontal> */  
     
    /* <vertical> */  
     
    .RadToolBar_BTSToolBar_Vertical .rtbMiddle  
    {  
        background: transparent url('ToolBar/rtbVerticalControlBg.png') repeat-y 0 0;  
    }  
     
    /* </vertical> */  
     
    /* </tool wrapper> */  
     
    /* <buttons> */  
     
    .RadToolBar_BTSToolBar .rtbWrap,  
    .RadToolBar_BTSToolBar .rtbTemplate  
    {  
        font: 12px;  
        font-family: Verdana, Time New Roman, helvetica, sans-serif;   
        color: #fff;  
    }  
    /* <button states> */  
     
    .RadToolBar_BTSToolBar .rtbSplBtnFocused .rtbWrap, .RadToolBar_BTSToolBar .rtbSplBtnFocused .rtbOut, .RadToolBar_BTSToolBar .rtbSplBtnFocused .rtbMid, .RadToolBar_BTSToolBar .rtbSplBtnFocused .rtbIn,  
    .RadToolBar_BTSToolBar .rtbItemFocused .rtbWrap, .RadToolBar_BTSToolBar .rtbItemFocused .rtbOut, .RadToolBar_BTSToolBar .rtbItemFocused .rtbMid, .RadToolBar_BTSToolBar .rtbItemFocused .rtbIn,  
    .RadToolBar_BTSToolBar .rtbItemHovered .rtbWrap, .RadToolBar_BTSToolBar .rtbItemHovered .rtbOut, .RadToolBar_BTSToolBar .rtbItemHovered .rtbMid, .RadToolBar_BTSToolBar .rtbItemHovered .rtbIn  
    {  
        background-color: transparent;  
        background-repeat: no-repeat;  
        background-image: url('ToolBar/rtbHoverBg.png');  
    }  
     
    .RadToolBar_BTSToolBar .rtbItemClicked .rtbWrap, .RadToolBar_BTSToolBar .rtbItemClicked .rtbOut, .RadToolBar_BTSToolBar .rtbItemClicked .rtbMid, .RadToolBar_BTSToolBar .rtbItemClicked .rtbIn  
    {  
        background-color: transparent;  
        background-repeat: no-repeat;  
        background-image: url('ToolBar/rtbClickedBg.png');  
    }  
     
    .RadToolBar_BTSToolBar .rtbSplBtnExpanded .rtbWrap, .RadToolBar_BTSToolBar .rtbSplBtnExpanded .rtbOut, .RadToolBar_BTSToolBar .rtbSplBtnExpanded .rtbMid, .RadToolBar_BTSToolBar .rtbSplBtnExpanded .rtbIn,  
    .RadToolBar_BTSToolBar .rtbDropDownExpanded .rtbWrap, .RadToolBar_BTSToolBar .rtbDropDownExpanded .rtbOut, .RadToolBar_BTSToolBar .rtbDropDownExpanded .rtbMid, .RadToolBar_BTSToolBar .rtbDropDownExpanded .rtbIn,  
    .RadToolBar_BTSToolBar .rtbChecked .rtbWrap, .RadToolBar_BTSToolBar .rtbChecked .rtbOut, .RadToolBar_BTSToolBar .rtbChecked .rtbMid, .RadToolBar_BTSToolBar .rtbChecked .rtbIn  
    {  
        background-image: url('ToolBar/rtbActiveBg.png');  
        background-color: transparent;  
        background-repeat: no-repeat;  
    }  
     
    .RadToolBar_BTSToolBar .rtbItemFocused .rtbWrap,  
    .RadToolBar_BTSToolBar .rtbItemHovered .rtbWrap  
    {  
        color: #fff;  
    }  
     
    .RadToolBar_BTSToolBar .rtbDropDownExpanded .rtbWrap,  
    .RadToolBar_BTSToolBar .rtbSplBtnExpanded .rtbWrap,  
    .RadToolBar_BTSToolBar .rtbChecked .rtbWrap,  
    .RadToolBar_BTSToolBar .rtbItemClicked .rtbWrap  
    {  
        color: #fff;  
    }  
     
    /* </button states> */  
     
    /* <Drop Down Arrows> */  
     
     
    .RadToolBar_BTSToolBar .rtbSplBtn .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbItem .rtbVOriented .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbChoiceArrow   
    {  
        background-image: url('ToolBar/ddArrow.png');  
          
    }  
     
    * html .RadToolBar_BTSToolBar .rtbSplBtn .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbItem .rtbVOriented .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbChoiceArrow   
    {  
        background-image: url('ToolBar/rtbDropArrows.gif');  
    }  
     
    .RadToolBar_BTSToolBar .rtbExpandUp .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbExpandUp .rtbVOriented .rtbChoiceArrow  
    {  
        background-image: url('ToolBar/rtbUpArrows.png');  
    }  
     
    * html .RadToolBar_BTSToolBar .rtbExpandUp .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbExpandUp .rtbVOriented .rtbChoiceArrow  
    {  
        background-image: url('ToolBar/rtbUpArrows.gif');  
    }  
     
    .RadToolBar_BTSToolBar .rtbSplBtnHovered .rtbVOriented .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbSplBtnHovered .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbItemHovered .rtbVOriented .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbItemHovered .rtbChoiceArrow  
    {  
        background-color: transparent;  
    }  
     
    * html .RadToolBar_BTSToolBar .rtbSplBtnHovered .rtbVOriented .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbSplBtnHovered .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbItemHovered .rtbVOriented .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbItemHovered .rtbChoiceArrow  
    {  
        background-image: url('ToolBar/rtbHoverDropArrows.gif');  
    }  
     
    .RadToolBar_BTSToolBar .rtbSplBtnHovered .rtbExpandUp .rtbVOriented .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbSplBtnHovered .rtbExpandUp .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbItemHovered .rtbExpandUp .rtbVOriented .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbItemHovered .rtbExpandUp .rtbChoiceArrow  
    {  
        background-image: url('ToolBar/rtbHoverUpArrows.png');  
    }  
     
    * html .RadToolBar_BTSToolBar .rtbSplBtnHovered .rtbExpandUp .rtbVOriented .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbSplBtnHovered .rtbExpandUp .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbItemHovered .rtbExpandUp .rtbVOriented .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbItemHovered .rtbExpandUp .rtbChoiceArrow  
    {  
        background-image: url('ToolBar/rtbHoverUpArrows.gif');  
    }  
     
    .RadToolBar_BTSToolBar .rtbSplBtnClicked .rtbVOriented .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbSplBtnClicked .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbItemClicked .rtbVOriented .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbItemClicked .rtbChoiceArrow  
    {  
        background-color: transparent;  
    }  
     
    * html .RadToolBar_BTSToolBar .rtbSplBtnClicked .rtbVOriented .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbSplBtnClicked .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbItemClicked .rtbVOriented .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbItemClicked .rtbChoiceArrow  
    {  
        background-image: url('ToolBar/rtbClickedDropArrows.gif');  
    }  
     
    .RadToolBar_BTSToolBar .rtbSplBtnClicked .rtbExpandUp .rtbVOriented .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbSplBtnClicked .rtbExpandUp .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbItemClicked .rtbExpandUp .rtbVOriented .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbItemClicked .rtbExpandUp .rtbChoiceArrow  
    {  
        background-image: url('ToolBar/rtbClickedUpArrows.png');  
    }  
     
    * html .RadToolBar_BTSToolBar .rtbSplBtnClicked .rtbExpandUp .rtbVOriented .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbSplBtnClicked .rtbExpandUp .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbItemClicked .rtbExpandUp .rtbVOriented .rtbChoiceArrow,  
    * html .RadToolBar_BTSToolBar .rtbItemClicked .rtbExpandUp .rtbChoiceArrow  
    {  
        background-image: url('ToolBar/rtbClickedUpArrows.gif');  
    }  
     
    /* </Drop Down Arrows> */  
     
    .RadToolBar_BTSToolBar_Horizontal li.rtbSeparator   
    {  
        border-left: 1px solid #181818;  
        background: #5c5c5c;  
    }  
     
    .RadToolBar_BTSToolBar_Vertical li.rtbSeparator  
    {  
        border-top: 1px solid #181818;  
        background: #5c5c5c;  
    }  
     
    /* </buttons> */  
     
     
    /* <disabled states> */  
     
    .RadToolBar_BTSToolBar .rtbDisabled .rtbWrap:hover,  
    .RadToolBar_BTSToolBar .rtbDisabled .rtbWrap:hover .rtbOut,  
    .RadToolBar_BTSToolBar .rtbDisabled .rtbWrap:hover .rtbMid,  
    .RadToolBar_BTSToolBar .rtbDisabled .rtbWrap:hover .rtbIn  
    {  
        background: none;  
    }  
     
    .RadToolBar_BTSToolBar .rtbDisabled .rtbWrap { color: #888; }  
     
    .RadToolBar_BTSToolBar .rtbDisabled .rtbChoiceArrow,  
    .RadToolBar_BTSToolBar .rtbDisabled .rtbWrap .rtbChoiceArrow  
    { background-image: url('ToolBar/rtbDropArrows.gif')\9 }  
     
    @media screen and (-webkit-min-device-pixel-ratio:0)  /* WebKit alpha + opacity/cleartype bug, like IE wasn't enough... */  
    {  
        .RadToolBar_BTSToolBar .rtbDisabled .rtbWrap { color: #888; }  
          
        .RadToolBar_BTSToolBar .rtbDisabled .rtbChoiceArrow,  
        .RadToolBar_BTSToolBar .rtbDisabled .rtbWrap .rtbChoiceArrow  
        {  
            background-image: url('ToolBar/rtbDropArrows.gif');  
        }  
    }  
     
    /* </disabled states */  
     
    /* <drop-down> */  
     
    .RadToolBarDropDown_BTSToolBar   
    {  
        border-color: #000;  
        background-color: #ff0000;  
        /* background-image: url('ToolBar/rtbDropDownBg.png'); 4f4f4f */  
    }  
     
    .RadToolBarDropDown_BTSToolBar .rtbWrap,  
    .RadToolBarDropDown_BTSToolBar .rtbTemplate  
    {  
        font-weight: bold;  
        font-size: 12px;  
        font-family: Verdana, Time New Roman, helvetica, sans-serif;  
        color: #fff;  
    }  
     
    .RadToolBarDropDown_BTSToolBar .rtbItemHovered,  
    .RadToolBarDropDown_BTSToolBar .rtbItemFocused,  
    .RadToolBarDropDown_BTSToolBar .rtbItemHovered .rtbWrap,  
    .RadToolBarDropDown_BTSToolBar .rtbItemFocused .rtbWrap  
    {  
        color: #FF0000;  
        background-image: url('ToolBar/DropDownHover.png');  
    }  
     
    .RadToolBarDropDown_BTSToolBar .rtbDisabled .rtbWrap  
    {  
        color: #999;  
    }  
     
    .RadToolBarDropDown_BTSToolBar .rtbSeparator  
    {  
        border-color: #393939;  
        background: #626262;  
    }  
     
    /* </drop-down> */  
     
    /* </RadToolBar / Black> */  
     
    /* Change font size here for main menus */  
    DIV.RadToolBar_BTSToolBar .rtbWrap{line-height: 22px; background-color: transparent; font-size: 17px;}  
    .RadToolBar_BTSToolBar .rtbTemplate{line-height: 22px; background-color: transparent; font-size: 17px;}  
    .RadToolBar_BTSToolBar .rtbItemFocused .rtbWrap{}  
    .RadToolBar_BTSToolBar .rtbItemHovered .rtbWrap{}  
    .RadToolBar_BTSToolBar .rtbDropDownExpanded .rtbWrap{}  
    .RadToolBar_BTSToolBar .rtbDropDownExpanded .rtbWrap{}  
    .RadToolBar_BTSToolBar .rtbSplBtnExpanded .rtbWrap{}  
    .RadToolBar_BTSToolBar .rtbChecked .rtbWrap{}  
    .RadToolBar_BTSToolBar .rtbItemClicked .rtbWrap{}  
    /* .rtbText {text-decoration: underline;}  Take out when you move to BTS */  
    DIV.RadToolBar_BTSToolBar{}  
    DIV.RadToolBar_BTSToolBar .rtbOuter{width: 960px;}  
    DIV.RadToolBar_BTSToolBar .rtbMiddle{text-align: center;}  
    DIV.RadToolBar_BTSToolBar .rtbInner{}  
    DIV.RadToolBar_BTSToolBar .rtbItem {}
    DIV.RadToolBar_BTSToolBar .rtbItem span {}
    DIV.RadToolBar_BTSToolBar .rtbChoiceArrow{}  
    DIV.RadToolBarDropDown_BTSToolBar{}  
    /* Change font size here for submenus */  
    DIV.RadToolBarDropDown_BTSToolBar .rtbWrap{line-height: 26px; background-position: 0px 0px; font-size: 16px;}  
    DIV.RadToolBarDropDown_BTSToolBar .rtbItemHovered .rtbWrap{}  
    DIV.RadToolBarDropDown_BTSToolBar .rtbDisabled .rtbWrap{}  
     

    Reply

  • Yana Yana admin's avatar

    Posted on Jan 19, 2010 (permalink)

    Hello James,

    Please modify your DropDownOpened method like this:

    function DropDownOpened (sender, args) { 
        var item = args.get_item(); 
        var element = item.get_element(); 
        var btnColorElement = item.get_linkElement(); 
           
        if (element.className.indexOf('rtbDropDown') >= 0) {
     
            var dropDownList = item.get_dropDownElement();
     
            //fix position
            if (item.get_text() == "Help") {
                var rightPos = $telerik.getLocation(element).x + $telerik.getSize(element).width;
                var dropDownElemContainer = item._animationContainer;
                var leftPos = rightPos - dropDownElemContainer.clientWidth;
                dropDownElemContainer.style.left = leftPos + "px";
            }
             
               
            document.onmousemove = function (e) { 
                    if (!e) e = window.event; 
                    if (!e.target) e.target = e.srcElement; 
                       
                    if (!$telerik.isDescendantOrSelf(dropDownList, e.target) && !$telerik.isDescendantOrSelf(element, e.target)) { 
                        item.hideDropDown(); 
                    } 
                }; 
        } 
    }


    Best regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

    Reply

  • James Brannon avatar

    Posted on Jan 21, 2010 (permalink)

    Thanks... Works like a champ.

    Reply

    • Q1 Webinar Week

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolBar > Drop Down Alignment
Related resources for "Drop Down Alignment"

[   ASP.NET ToolBar Features  |  Documentation  |  Demos  |  Telerik TV   |   Self-Paced Trainer   |  Step-by-step Tutorial  ]