This is a migrated thread and some comments may be shown as answers.

Twitter Bootstrap dropdown or any div is hidden behind Grid Cell

4 Answers 835 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Liping
Top achievements
Rank 1
Liping asked on 21 Jun 2013, 12:54 PM
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

4 Answers, 1 is accepted

Sort by
-1
Alexander Valchev
Telerik team
answered on 25 Jun 2013, 07:55 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Lee
Top achievements
Rank 1
Iron
Iron
Iron
commented on 27 Jul 2022, 03:05 PM

Overflow: visible will make any rows in locked columns show below the table. 
0
Nicolas
Top achievements
Rank 1
answered on 13 Feb 2017, 02:25 PM

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

-1
Konstantin Dikov
Telerik team
answered on 15 Feb 2017, 09:00 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
-1
Nicolas
Top achievements
Rank 1
answered on 15 Feb 2017, 11:34 AM

It was fixed by adding.

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

 

Thanks!

Tags
Grid
Asked by
Liping
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Nicolas
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or