Dropdown menu from table row in Bootstrap

I'm trying to get a dropdown menu working from a table row using the Jasny extension found http://www.jasny.net/bootstrap/components/#rowlink. Unfortunately I can't seem to get it to work to display a dropdown. I have en example of what I've done so far:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<thead>
    <tr>
        <th>
            Heading
        </th>
        <th>
            Heading
        </th>
    </tr>
</thead>
<tbody data-provides="rowlink">
    <tr class="rowlink">
        <td>
            <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Click For Dropdown Menu
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>
                        <a tabindex="-1" href="#">
                            Action
                        </a>
                    </li>
                    <li>
                        <a tabindex="-1" href="#">
                            Another action
                        </a>
                    </li>
                </ul>
            </div>
        </td>
        <td>
            Click For Dropdown Menu
        </td>    
    </tr>
    <tr>
        <td>
            Cell
        </td>
        <td>
            Cell
        </td>    
    </tr>         
</tbody>
</table>

Clicking row will follow href link, instead of displaying the dropdown menu. I can get the rowlink extension to work as a link or to call a modal window. I can also get a dropdown to come from a single cell (without jasny extension), but would like it to work from the whole row.

Upvotes: 3

Answers (4)

Shital Shah

Reputation: 68728

Bootstrap 3.x

By default Bootstrap dropdowns inside a table cell doesn't show up properly (they would show up at the bottom of the page). To fix this you need to set class for the container as dropdown. For table cells, this would look like this:

<td class="dropdown">

DEMO: http://jsfiddle.net/sytelus/kzxes29r/

PS: If you don't want to change style for table cell, you can also create a div inside cell and set its class to "dropdown".

Upvotes: 8

user2564293

Reputation: 131

set

<td style="overflow:visible">

it works.

Upvotes: 8

ErickBest

Reputation: 4692

You might try this::

    <!DOCTYPE html>
<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script>
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>

<body>
<h3>Drop down menu</h3>
<table width="100%">
 <tr bgcolor="#FF8080">
  <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
   <a href="/default.asp">Tutorials</a><br>
   <table class="menu" id="tutorials" width="120">
   <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
   <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
   <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
   <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
   </table>
  </td>
  <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
   <a href="/default.asp">Scripting</a><br>
   <table class="menu" id="scripting" width="120">
   <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
   <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
   <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
   <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
   <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
   </table>
  </td>
  <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
   <a href="/site/site_validate.asp">Validation</a><br>
   <table class="menu" id="validation" width="120">
   <tr><td class="menu"><a href="/web/web_validate.asp">Validate HTML</a></td></tr>
   <tr><td class="menu"><a href="/web/web_validate.asp">Validate XHTML</a></td></tr>
   <tr><td class="menu"><a href="/web/web_validate.asp">Validate CSS</a></td></tr>
   <tr><td class="menu"><a href="/web/web_validate.asp">Validate XML</a></td></tr>
   <tr><td class="menu"><a href="/web/web_validate.asp">Validate WML</a></td></tr>
   </table>
  </td>
 </tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>

</html>

Upvotes: 0

Arnold Daniels

Reputation: 16573

Unfortunately rowlink only works with the href and doesn't propogate js events. So it can't be used for dropdowns.

Having a closer look dropdown code, shows that after the dropdown is initialized a click on dropdown-toggle doesn't do much more than toggle the 'open' class. We can easily mimic that. Now we just need to make sure dropdown is initialized on load instead of on click and presto :)

Note that I'm only using the rowlink css (not js) for the pointer and link style.

<html>
<head>
    <link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<tbody>
    <tr class="rowlink">
        <td>
            <div class="dropdown">
                <a class="dropdown-toggle rowlink" data-toggle="dropdown" href="#">
                    Click For Dropdown Menu
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>
                        <a tabindex="-1" href="#">
                            Action
                        </a>
                    </li>
                    <li>
                        <a tabindex="-1" href="#">
                            Another action
                        </a>
                    </li>
                </ul>
            </div>
        </td>
        <td>
            Click For Dropdown Menu
        </td>    
    </tr>
    <tr><td>Cell</td><td>Cell</td></tr>         
</tbody>
</table>

<script src="js/jquery.js"></script>
<script src="js/bootstrap-dropdown.js"></script>

<script>
    $(function() {
        $(this).find('.dropdown-toggle').dropdown();

        $('.rowlink').on('click', function(e) {
            $(this).find('.dropdown').toggleClass('open');
            e.stopPropagation();
        });
    });
</script>

</body>
</html>

P.S. This jsfiddle kept crashing my browser :s

Upvotes: 5

Dropdown menu from table row in Bootstrap

Answers (4)

Related Questions