Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Drop Down Alignment

2 Answers 153 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
James Brannon
Top achievements
Rank 1
James Brannon asked on 15 Jan 2010, 04:20 PM
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 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 19 Jan 2010, 09:35 AM
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.
0
James Brannon
Top achievements
Rank 1
answered on 21 Jan 2010, 02:56 PM
Thanks... Works like a champ.
Tags
ToolBar
Asked by
James Brannon
Top achievements
Rank 1
Answers by
Yana
Telerik team
James Brannon
Top achievements
Rank 1
Share this question
or