denissapop denissapop - 4 months ago 13
Javascript Question

Dropdown menu is not centered on the selected dropdown button

I'm making a dropdown menu, but the dropdown menu for my LinkButton1 is not aligned with the button itself when clicked (it drops down below the first button instead). I'm using bootstrap by the way.

Here are my codes:

<div class="dropdown" >
<ul> <li>
<button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">Women's
<span class="caret"></span></button>
<ul class="dropdown-menu ">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>


<li>
<asp:LinkButton ID="LinkButton1" runat="server" class="dropdown-toggle" data-toggle="dropdown">LinkButton<span class="caret"></span></asp:LinkButton>
<ul class="dropdown-menu ">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>

</li>

<li>
<ul class="nav navbar-right">

<li id="google_translate_element"></li><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL }, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</ul>
</li>
</ul>


(Side note: I added a google translator API at the right side)

How do I align my Linkbutton's dropdown menu with the Linkbutton itself, instead of the first button?

Here is how it looks like when i click the 2nd button- the dropdown menu appears under the 1st button:
Click image here

Answer

Check this if it helps you

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
   <ul class="list-inline"> 
 <li>
     <div class="dropdown" >  
       <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">Women's
         <span class="caret"></span></button>
         <ul class="dropdown-menu ">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </div>
    </li>


    <li>
      <div class="dropdown" > 
       <asp:LinkButton ID="LinkButton1" runat="server" class="dropdown-toggle" data-toggle="dropdown">LinkButton<span class="caret"></span></asp:LinkButton> 
       <ul class="dropdown-menu ">
         <li><a href="#">HTML</a></li>
         <li><a href="#">CSS</a></li>
         <li><a href="#">JavaScript</a></li>
       </ul>
     </div>
   </li>

   <!--<li>
    <div class="dropdown" > 
      <ul class="nav navbar-right">
        <li id="google_translate_element"></li><script type="text/javascript">
        function googleTranslateElementInit() {
         new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL }, 'google_translate_element');
       }
     </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
   </ul> 
 </div>
</li>-->
</ul>
</div>
</body>
</html>