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

Unable to fix grid row height at set value

1 Answer 608 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rick
Top achievements
Rank 2
Rick asked on 20 Nov 2015, 03:47 PM

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

Sort by
0
Dimo
Telerik team
answered on 23 Nov 2015, 12:15 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Rick
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Share this question
or