I am trying to fix the height of grid rows and hide the overflow. The code below does not work. Even if I set overflow-y:hidden. The rows expand vertically to show all the text. Eventually, I would like to show an ellipse(...) and open a popup with the full text on hover/click. But, I need first to fix the height at some value.
I saw some threads that indicated my approach here might work. So, I think some of my assumptions are incorrect.
My hope is that someone notices right away my problem.
Thanks,
Rick
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Menlo Park Project</title> <link rel="stylesheet" href="../styles/kendo.common.min.css"> <link rel="stylesheet" href="../styles/kendo.default.min.css"> <style type="text/css"> .k-grid tr { max-height:20px; overflow:hidden; } .k-grid td { max-height:20px; overflow:hidden; } </style> <script src="../js/jquery-1.9.1.js"></script> <script src="../js/kendo/kendo.all.min.js"></script></head>1 Answer, 1 is accepted
0
Hello Rick,
Table cells and rows always expand vertically if their contents cannot fit and this is a standard browser behavior, which cannot be overridden by CSS styles..
In order to achieve the desired result, you need to wrap the cell content in <div>s with a predefined height and overflow:hidden style. Use column templates.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template
Regards,
Dimo
Telerik
Table cells and rows always expand vertically if their contents cannot fit and this is a standard browser behavior, which cannot be overridden by CSS styles..
In order to achieve the desired result, you need to wrap the cell content in <div>s with a predefined height and overflow:hidden style. Use column templates.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!