Bootstrap Dropdown with Input inside Table Head Issue

[sassy]

Alright, here is my issue:I want one of the \[code\]<th></th>\[/code\] in my table to be a link with a drop-down. I also want an input field with a filter button placed to the right in the same drop-down.\[code\]<th> <div class="dropdown inline-dropdown input-dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="http://stackoverflow.com/questions/14085790/#"> <span>Name</span> <span class="caret"></span> </a> <ul class="dropdown-menu input-dropdown-menu"> <li> <div class="controls controls-row"> <form> <p> <label class="inner-label" for="sqft-max">Name</label> <input class="span10 input-first" name="sqft-max" id="sqft-max" type="text"/> </p> <button type="submit" class="btn">Filter</button> </form> </div> </li> </ul> </div></th>\[/code\]However the list cuts off the button not the input... I tested the drop-down outside of the table and it works just fine... So it has something to do with the table... Please see my fiddle for more clarification.http://jsfiddle.net/qeT6T/19/Thanks for the help!