0

When adding a dropdown to a table row, it is getting cut off as so: enter image description here

Other questions have pointed me in the direction of a stacking problem, but I just can't work out how to fix it. I have tried adding z-index:1000 and position:relative style attributes to each of the parent DIV's but that hasn't fixed the issue. Not sure what to try next...

<div class="row-fluid">
    <div class="span12">
        <div class="grid simple ">
            <div class="grid-body table_highlight>
                <table class="table table-striped" id="example2">
                    <thead>
                        <tr>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                            <tr> 
                                <td>
                                    <div class="btn-group">
                                        <a class="btn btn-info dropdown-toggle btn-demo-space" data-toggle="dropdown" href="#"> Info <span class="caret"></span> </a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Edit

I have changed the code to the following to make it clearer how it all fits together:

<div class="row-fluid" style=" border: 5px red solid;">
    <div class="span12" style=" border: 5px green solid;">
        <div class="grid simple " style=" border: 5px blue solid;">
            <div class="grid-title">
                ...
            </div>
                <div class="grid-body table_highlight" style=" border: 5px yellow solid;">

This is how it now appears:

enter image description here

Community
  • 1
  • 1
Joseph
  • 2,706
  • 6
  • 42
  • 80
  • Could you also post the html of the next element that blocks the dropdown? – AyB May 26 '14 at 12:11
  • @ICanHasKittenz I have edited the question to highlight the different DIV's. It seems to be the grid-body it is having an issue with, but I can't seem to resolve it. – Joseph May 26 '14 at 14:51
  • Your code above looks ok in this fiddle http://jsfiddle.net/napple/bmFCY/ - Could you share more of your code to help illustrate where the probably is? – Nathan Apple May 26 '14 at 15:18
  • @NathanApple It's clearly something I've done wrong then. I have added my CSS page to: http://jsfiddle.net/PhALG/1/ and I have the same issue. – Joseph May 26 '14 at 15:30

1 Answers1

0

It looks like the problem is that the grid-body class has an overflow style set to hidden. When the dropdown is activated, its size is larger than the grid-body's size, so the dropdown gets clipped. You can see it fixed if you add overflow: visible to the style attribute on your div with the grid-body class: fiddle

As a permanent fix, you might want to explore modifying the HTML and/or CSS instead of just adding the style directly to the element, though.

Nathan Apple
  • 241
  • 1
  • 3