I want my dropdown to open to the left instead of the right.
I have a dropdown extender inside a user control. In turn the user control is used inside a master page. Relevant markup is shown below for both. I found a code snippet ( also shown below) at http://www.dotnetcurry.com/ShowArticle.aspx?ID=167 that explains how to make the dropdown open to the left.
I can't seem to figure out where to place this code to avoid getting an error.
<script type="text/javascript">
function pageLoad()
{
var chngPosition = $find('TextBox1_DropDownExtender')._dropPopupPopupBehavior;
chngPosition.set_positioningMode(2);
}
</script>
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="MasterDropDown.ascx.vb" Inherits="User_Controls_MasterDropDown" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:DropDownList ID="DropDownList1" runat="server" Width="19px" CausesValidation="false">
</asp:DropDownList>
<asp:panel id="DropPanel1" runat="server" width="80px" HorizontalAlign="Left" BackColor="#ffffff" >
<div style="padding: 5px 0px 5px 10px;">
<asp:linkbutton id="lnkMyAccount" runat="server" text="Account" CausesValidation="false" /><br />
<asp:linkbutton id="lnkMyProfile" runat="server" text="My Profile" CausesValidation="false" /><br />
<asp:linkbutton id="lnkHelp" runat="server" text="Help" CausesValidation="false" /><br />
<asp:linkbutton id="lnkLogOut" runat="server" text="Log Out" CausesValidation="false" />
</div>
</asp:panel>
<cc1:dropdownextender id="DropDownExtender1" TargetControlID="DropDownList1"
DropDownControlID="DropPanel1" runat="server" >
</cc1:dropdownextender>
<%@ Master Language="VB" CodeFile="ThreeColFixedTopLevel.master.vb" Inherits="ThreeColFixedTopLevel"
EnableTheming="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register TagPrefix="user8" TagName="Dropdown" Src="~/User_Controls/MasterDropDown.ascx" %>
<!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 id="Head1" profile="http://www.w3.org/2005/10/profile" runat="server">
<link rel="icon"
type="image/png"
href="http://www.securedealsheet.com/Images/icons/favicon.png" />
<title></title>
<script type="text/javascript" src="../js/jquery.fcbkcomplete.js" charset="utf-8"></script>
<!-- For masked edit currency -->
<!-- http://decorplanit.com/plugin/ -->
<script type="text/javascript" src="../js/jquery.metadata.js" ></script>
<script type="text/javascript" src="../js/autoNumeric.js" ></script>
<script type="text/javascript" src="../js/autoLoader.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul.topnav li").click(function () { //Hover over event on list item
//$(this).css({ 'background': 'darkgray url(topnav_active.gif) repeat-x' }); //Add background color and image on hovered list item
var rel = $(this).find("span").attr("rel")
var href = $(this).find("a:first").attr("href");
if (href == "deals.aspx") {
}
else {
//alert(href);
if (rel != "hide") {
$(this).find("span").show(); //Show the subnav
}
}
$(this).addClass("nav_hover");
}, function () { //on hover out...
var rel = $(this).find("span").attr("rel")
var href = $(this).find("a:first").attr("href");
if (href == "mydeals.aspx") {
}
else {
if ($(this).attr("class") != "nav_current") {
$(this).find("span").hide(); //Hide the subnav
}
}
$(this).removeClass("nav_hover"); //Ditch the background
});
//SetHeadCurrentClass();
$(".topnav").find("a").each(function () {
var urlarry = location.href.split('/');
var urlTail = urlarry[urlarry.length - 1].toLowerCase();
//var urlTail = location.href.replace(/http://localhost/securede/protected//, '');
if ($(this).attr("href").toLowerCase() == urlTail) {
var parentTagname = $(this).parent().attr("tagName").toLowerCase();
if (parentTagname == "li") {
var rel = $(this).next().attr("rel")
if (rel == "hide") {
}
else {
$(this).next().css("z-index", "0");
$(this).next().show();
}
$(this).parent().addClass("nav_current");
}
else if (parentTagname == "span") {
var rel = $(this).parent().attr("rel")
if (rel == "hide") {
}
else {
$(this).parent().css("z-index", "0");
$(this).parent().show();
$(this).css("color", "#6eac2c");
}
$(this).parent().parent().addClass("nav_current");
}
}
});
$("#mentiondialog").dialog("destroy");
$("#mentiondialog").dialog({
autoOpen: false,
modal: true
});
});
</script>
<asp:ContentPlaceHolder id="Head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<div id="header" class="header" runat="server" >