I am using IgniteUI igGrid. I am trying to have a bootstrap dropdown button for one of the table cells of the grid (using the template feature).
{
key: "Action2Id",
headerText: "Action",
dataType: "int",
width: "16%",
template: "
"
}
The issue I'm having is that the dropdown menu is getting cutoff. I added the following style, which helped.
<style type="text/css">
#pendingRequestsGrid, #pendingRequestsGrid tr td {
overflow:visible;
style>
However, I'm still having issues with the menu being clipped on the right and for rows at the bottom of the iggrid (see attached screenshot). In short, is there any way you can think of to get the dropdown menu to appear outside (on top of) the iggrid?
Hello Tory,
I assume that this could be a style specific issue, however in order to investigate it further I'll need a working sample that I can use as a starting point. Could you provide me with such sample? Thanks in advance.
Regards,
Tsanna
Hi Tsanna,
I have attached a sample solution that illustrates the problem. If you click the "Take Action" button, you will see that part of the dropdown menu is cutoff. Also, if you click the "Take Action" button for the last item on the page, you will see that the menu gets displayed behind the footer.
Tory.
After further investigation of this matter I found the following forum post: http://es.infragistics.com/community/forums/t/96817.aspx where a similar topic has been discussed. Essentially please note that the drop down is not visible due to the fact that its container is placed within the grid cell and the dropdown appears under the grid. If you want it to be visible when pressing the button, it should be placed on the same level in the DOM as the grid table element and positioned absolute against the grid cell. If you have further questions, please let me know.
Regards,Tsanna
Hi Tory,
I'm currently looking into this matter and will keep you posted of any available information. If you have any questions at the meantime, please let me know.