How do I make ColorPickerExtender to appear close to color picker button control?
On my web page when I click on the button to change the color of the label control, the ColorPickerExtender appear at the top left of my screen.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="stylesheet" href="style.css" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div>
<div class="col-sm-8" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; font-size: 10pt;">
<div class="card1" style="width: 100%; margin-top: 3%; border-radius: 6px; border: 1px solid #dde0e2;">
<asp:Image ID="Image1" ImageUrl="Test.png" runat="server" Width="40" Height="40" />
<div style="text-align: center;">
<asp:Label ID="Label6" runat="server" Text="Title"></asp:Label>
</div>
<div style="text-align: center;">
<asp:Label ID="Label7" runat="server" Text="BOOK"></asp:Label>
</div>
<div class="row" style="margin-top: 3%;">
<div class="col-sm-6">
<div class="form-group">
<label runat="server" id="Label8">First Name</label>
<div class="input-group">
<asp:Label ID="Label9" runat="server" Text="Richard"></asp:Label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label runat="server" id="Label10"></label>
<div class="input-group">
<asp:Label ID="Label11" runat="server" Text="Samuel"></asp:Label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<asp:Button ID="Button1" runat="server" Text="Text Header Color" />
<asp:TextBox ID="TextBox1" runat="server" Style="display: none;" />
<cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
PopupButtonID="Button1" PopupPosition="Center" OnClientColorSelectionChanged="ColorChanged" />
<asp:Button ID="Button2" runat="server" Text="Sub Header Text Color " />
<asp:TextBox ID="TextBox2" runat="server" Style="display: none;" />
<cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="TextBox1"
PopupButtonID="Button2" PopupPosition="Center" OnClientColorSelectionChanged="ChangeColor" />
</div>
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
function ColorChanged(sender) {
//sender.get_element().value = "#" + sender.get_selectedColor();
document.getElementById("Label6").style.color = "#" + sender.get_selectedColor();
}
function ChangeColor(sender) {
//sender.get_element().value = "#" + sender.get_selectedColor();
document.getElementById("Label7").style.color = "#" + sender.get_selectedColor();
}
</script>
</body>
</html>
