Hi Support.
I recently upgraded a jquery/bootstrap 3/kendoui project from less to sass, and have a bootstrap 3 dropdown button in grid row/cell that is being hidden by the grid pager. See screenshot.
The code below I used in the grid databound event in less to fix the "is hidden issue" no longer works in sass:
var style = document.createElement('style');
document.head.appendChild(style);
if (this.dataSource.data().length > 0) {
style.sheet.insertRule('#versions-grid .k-grid-content, #versions-grid tr td {overflow: visible}', 0);
} else {
style.sheet.insertRule('#versions-grid .k-grid-content, #versions-grid tr td {overflow: hidden}', 0);
}
1 Answer, 1 is accepted
Hello Morten,
You can try setting the overflow property of the .k-grid-container element to visible (currently it is set to hidden)
<style>
.k-grid-container{
overflow: visible !important;
}
</style>Here is a Dojo where this is demonstrated.
I hope this helps.
Regards,
Neli
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 2
Iron
Iron
Veteran
Thanks, Neli. Spot on.
One other minor issue (I've lived with it for a long time).
Insert in the the CSS rule:
style.sheet.insertRule('#grid .k-grid-content, #grid tr td {overflow: visible}', 0);Introduces a minor column misalignment (see screenshot).
I cloned your Dojo and added two columns: https://dojo.telerik.com/@mortenma71/ENAKeTeg
Any ideas to fix this misalignment?
Hi Morten,
I managed to resolve the misalignment issue using the following style:
.k-grid-header{
padding-right: 0px !important;
}Here you will find the modified Dojo example.
Regards,
Neli
Rank 2
Iron
Iron
Veteran
Thanks Neli. CSS wizard :-)