CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapjqgrid
ohavryl
ohavryl

Reputation: 407

Show Twitter Bootstrap dropdown menu inside JQGrid

I added twitter bootstrap dropdown menu to each JQGrid row using custom cell formatter. When I click the menu it is not fully visible. What style should I apply to show the dropdown menu on the very top of JQGrid row?

enter image description here

HTML:

<td role="gridcell" style="" title=" Actions   Update Delete" aria-describedby="jqg1_actions1">
   <div class="btn-group pull-right open">
      <div class="dropdown-backdrop"></div>
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-bell"></i> Actions  <span class="caret"></span></a>
      <ul class="dropdown-menu">
         <li><a href=""><i class="icon-bell"></i> Update</a></li>
         <li class="divider"></li>
         <li><a href=""><i class="icon-bell"></i> Delete</a></li>
      </ul>
   </div>
</td>

Upvotes: 4

Views: 1839

Answers (3)

Vasilis
Vasilis

Reputation: 41

Worked for me by adding style="position:absolute" to first div

Upvotes: 1

Spicado
Spicado

Reputation: 65

z-index for the dropdown menu should be greater than the z-index for the jqGrid. So, go to the CSS files, and set z-index for the dropdown as 9999.

Upvotes: 0

Asil ARSLAN
Asil ARSLAN

Reputation: 1136

Use this code:

<script type="text/javascript">
$(document).ready(function () {
    console.log("ready");
    $('.dropdown-toggle').dropdown();
    $("#shop_filter").dd_select({
        prefix: "Shop by: ",
        formID: "main_form",
        hiddenFieldName:"filter",
        submitOnChange: false,
        ajaxCall:{}
    });
});
</script>

From the example http://www.vaskointeractive.com/demos/bootstrap-dd-select/

Upvotes: 0

Related Questions