title: Bootstrap dropdown menu within a panel
body: <p>I have a bootstrap dropdown menu within a panel.  My problem is that it is not nicely handling what happens when the menu hits a panel boundary.  For instance, if it hits the bottom border, I'd prefer it to scroll.  Also, more importantly, if it goes off the right side of the screen, I'd prefer it to either go left instead or even ignore the panel boundaries and go outside the panel.  </p>
  
  <p>As an example, see the following fiddle.  Click the dropdown buttons to see the menu. Hover over the "Filter Type" option to get the menu that goes to the right.  In particular, note the Filter Type submenu on the first dropdown vs the second one.</p>
  
  <p><a href="http://jsfiddle.net/w976zooe/" rel="nofollow noreferrer">http://jsfiddle.net/w976zooe/</a></p>
  
  <pre><code>&lt;div class="panel panel-default" style="width: 500px;"&gt;
      &lt;div class="panel-body"&gt;
          &lt;div style="min-height: 300px; overflow: auto;"&gt;
  
              &lt;table style="display: inline-block;"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;input class="form-control" /&gt;
                                  &lt;div class="input-group-btn"&gt;
                                      &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                                      &lt;ul class="dropdown-menu dropdown-menu-right"&gt;
                                          &lt;li class="dropdown-submenu"&gt;
                                              &lt;a class="text-right"&gt;Filter type&lt;span class="glyphicon glyphicon-menu-right"&gt;&lt;/span&gt;&lt;/a&gt;
                                              &lt;ul class="dropdown-menu"&gt;
                                                  &lt;li&gt;&lt;a&gt;Contains&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li&gt;&lt;a&gt;Equals&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li&gt;&lt;a&gt;Less Than&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li&gt;&lt;a&gt;Greater Than&lt;/a&gt;&lt;/li&gt;
                                              &lt;/ul&gt;
                                          &lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 1&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 2&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 3&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 4&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 5&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 6&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 7&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 8&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 9&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 10&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;input class="form-control" /&gt;
                                  &lt;div class="input-group-btn"&gt;
                                      &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                                      &lt;ul class="dropdown-menu dropdown-menu-right"&gt;
                                          &lt;li class="dropdown-submenu"&gt;
                                              &lt;a class="text-right"&gt;Filter type&lt;span class="glyphicon glyphicon-menu-right"&gt;&lt;/span&gt;&lt;/a&gt;
                                              &lt;ul class="dropdown-menu"&gt;
                                                  &lt;li&gt;&lt;a&gt;Contains&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li&gt;&lt;a&gt;Equals&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li&gt;&lt;a&gt;Less Than&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li&gt;&lt;a&gt;Greater Than&lt;/a&gt;&lt;/li&gt;
                                              &lt;/ul&gt;
                                          &lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 1&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 2&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 3&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 4&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 5&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 6&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 7&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 8&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 9&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a&gt;Row 10&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/th&gt;
                          &lt;th&gt;
                              &lt;button type="button" class="btn btn-default"&gt;X&lt;/button&gt;
                          &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
              &lt;/table&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>