Twitter Bootstrap dropdown or any div is hidden behind Grid Cell

[Liping]

I have a requirement which has a drop down menu inside each row of the kendo ui grid. Specifically, when user click a button inside a cell of each row of the grid, a pull down menu will open.

I used twitter bootstrap drop down for this pull down menu. However the pull down menu is hidden behind the  cell and would only show the area within bounds of the cell. I need to the pull down menu to be the top floating div on top of the grid. 

I tried to set z-index to a large number like 9999, but didn't seem to have an effect. I used a regular div instead of twitter bootstrap. The same thing happened. The div is hidden.

I think it is something to do with the grid not allowing cell content to be larger and popped out on the grid.

Here is my code snippet if it helps:

<div id="gridCounterOffers" style="z-index: 1;">
</div>

<script id="actionCounterTemplate" type="text/x-kendo-tmpl">  
     <div class="btn-group" style="z-index: 5;">
                <button class="btn btn-mini btn-danger">
                    Counter Offer</button>
                <button class="btn btn-mini  btn-danger dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <div class="dropdown-menu action-menu pricing-menu" style="z-index: 99999; border: 1px solid red">
                    <a class="close">×</a>
                    <label style="text-align: left; font-weight: bold" class="spacer">
                        Price Per Carat:
                    </label>
                    <input type="number" min="0" max="1000000" step="10" style="width: 150px" />
                    <table class="table table-striped spacer">
                        <tr>
                            <th>
                                Price Per Carat *
                            </th>
                            <th>
                                Weight
                            </th>
                        </tr>
                        <tr>
                            <td>
                                <span id="lblNewPricePerCarat"></span>
                            </td>
                            <td>
                                <span id="lblWeight"></span>
                            </td>
                        </tr>
                    </table>
                    <span style="font-weight: bold">Price Total =</span><span id="lblNewPriceTotal"></span>
                    <label style="text-align: left" class="spacer">
                        Please Enter Note Below:
                    </label>
                    <textarea rows="2" cols="400" id="txtPricingNote" style="width: 200px"></textarea>
                    <div class="control-group">
                        <button type="submit" class="btn btn-mini btn-action">
                            Submit</button>
                    </div>
                </div>
            </div>
</script>


        $("#gridCounterOffers").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "/Product/GetCounterOffers/",
                        contentType: "application/json",
                        type: "GET"
                    }
                },
                schema: {
                    parse: function (response) {
                        console.log('parse');
                        $.each(response, function (idx, elem) {
                            elem.CreateDate = moment(elem.CreateDate).format('MM/DD/YYYY h:mm a');
                        });
                        return response;
                    }
                }
            },
            height: 500,
            scrollable: false,
            sortable: true,
            filterable: false,
            reorderable: true,
            columnMenu: false,
            pageable: {
                pageSize: 10,
                input: true,
                numeric: true,
                pageSizes: true,
                refresh: true
            },
            messages: {
                empty: "There are no counter offers at this time. Please check back later."
            },
            columns: [
                { field: "PreviewImageFileName", title: "Sample", template: "<img src='@Constants.PRODUCT_IMAGE_FOLDER#= PreviewImageFileName #' style='width:50px; height:50px;' title='#= PreviewImageFileName #' />", width: "50px", sortable: false, filterable: false },
                { field: "ProductID", title: "Item ID", template: "<a href='/Product/'>#= ProductID #</a>", width: "30px", sortable: true, filterable: true },
                { field: "PricePerCarat", title: "Price Per Carat", template: '#= kendo.toString(PricePerCarat, "n2") # ', width: "50px", sortable: true, filterable: true },
                { field: "PriceTotal", title: "Price Total", template: '#= kendo.toString(PriceTotal, "n2") # ', width: "50px", sortable: true, filterable: true },
                { field: "CreateByUserName", title: "By", width: "50px", sortable: true, filterable: true },
                { field: "CreateDate", title: "Date", width: "100px", sortable: true, filterable: true },
                { title: "Accept", template:kendo.template($("#actionAcceptTemplate").html()), width: "50px", },
                { title: "Counter Offer", template:kendo.template($("#actionCounterTemplate").html()), width: "100px"}
                ]
        }); //kendogrid

[Alexander Valchev]

Hello Evan,

I assume that the problem is caused by the overflow: hidden styling that is applied to Grid's cell elements. Please try the following:

#gridCounterOffers .k-grid-content, #gridCounterOffers tr td {
    overflow:visible;
}

Regards,
Alexander Valchev
Telerik

[Lee]

Overflow: visible will make any rows in locked columns show below the table. 

[Nicolas]

Hi, I have the same issue but the dropdown button is placed inside the thead of a Kendo Gird. It's displayed behind the tbody element. I try to fix it by setting the overflow property to visible. It works when the button is inside a row or a cell in the table body, but it's not working when the button is on the header element of a table.

How can I fix it? Thanks

[Konstantin Dikov]

Hello Alejandro,

The selector from the previous post is for the TD elements, so you need to include the TH elements as well:

#gridCounterOffers .k-grid-content, #gridCounterOffers tr td, #gridCounterOffers tr th {
    overflow:visible;
}

Regards,
Konstantin Dikov
Telerik by Progress

[Nicolas]

It was fixed by adding.

.k-grid-header-wrap
{
overflow: visible;
}

 

Thanks!