Drop Down Alignment

3 posts, 0 answers
  1. James Brannon
    James Brannon avatar
    2 posts
    Member since:
    Jan 2010

    Posted 15 Jan 2010 Link to this post

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

    Posted 19 Jan 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James Brannon
    James Brannon avatar
    2 posts
    Member since:
    Jan 2010

    Posted 21 Jan 2010 Link to this post

    Thanks... Works like a champ.
Back to Top