Vertical scroll bar for gridTable in MVC WebGrid

Question

I am using a WebGrid in my mvc application. Now I want to fix the height of the WebGrid. For this purpose, I need a VerticalScrollBar for the gridTable contents.

<div class="grid-div" id="webgridid">
                @grid.GetHtml(
    tableStyle: "gridTable",
    headerStyle: "gridHead",
    footerStyle: "gridFooter",
    columns: new[]
    {
        grid.Column("name","Name", canSort: true, style: "name"),
        grid.Column("description","Description", canSort: true, style: "description"),
        grid.Column("duration","Duration", canSort: true, style: "duration"),
   })
</div>

This is my div which contains WebGrid. I need vertical scroll bar for only the gridtable part, not for gridHead(Header) and gridFooter (Footer).

I got a solution from here. In that, they are setting the height for the div which contains the webGrid like,

<style type="text/css">
    .grid-div {
        width: 650px;
        height:250px;
        overflow-y:auto;
    }
</style>

But, here the scroll bar is common for the gridTable as well as its header and footer. So, If I scroll down the scroll bar, then the header and footer also moving along with scroll bar.

Then I tried to set height for gridTable like,

<style type="text/css">
    .gridTable {
    font-family: Arial;
    font-size: 12px;
    width: 615px;
    max-height: 275px;
    overflow-y: auto;
    display: block;
    border-collapse: collapse;
    border: solid 1px #98BF21;
    background-color: white;
    text-wrap:inherit;
    }
</style>

But, Its not creating a vertical scroll bar even its height is greater than 275px. What will be the problem and how to solve it?

Aziz · Answer 1 · 2016-03-08T12:19:15.857

1

Setting a fixed height plus overflow: scroll or overflow: auto should work as expected. However, when you add display: table this will not work because tables ignore the height property, even max-height too, when combined with overflow.

Further reading: Bugzilla Bug 26617 - table ignores height and overflow attributes

The solution would be to remove the display: table property and make it a normal block / display: block;

.grid-div > div {padding:1em;}

.grid-div .gridHead {background:#000; color:#FFF;}

.grid-div .gridFooter {background:lightblue;}

.grid-div .gridTable {
  background:#CCC;
  height:100px;
  display:block;
  overflow: auto;
}

<div class="grid-div" id="webgridid">
  <div class="gridHead">.gridHead</div>
  <div class="gridTable">.gridTable <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero quasi assumenda atque, nemo molestias corrupti necessitatibus reiciendis voluptatem aliquid, id eos quam labore quos sunt quis temporibus, nisi architecto esse!</p></div>
  <div class="gridFooter">.gridFooter</div>
</div>

jsFiddle: https://jsfiddle.net/k7y29mLx/

edited Mar 08 '16 at 12:19

answered Mar 08 '16 at 11:28

Aziz

7,685
3
31
54

Here total 3 div is using to implement this. And not using WebGrid. But in my application I need a webGrid with Header, Footer and gridTable. So that I can bind the values directly to the grid table and it will display as different rows in gridTable. – itzmebibin Mar 08 '16 at 11:56
I am not familiar with `WebGrid` but doesn't it eventually compile into `HTML` divs? – Aziz Mar 08 '16 at 11:59
In my application, the gridTable of a WebGrid contains user details as rows and columns. So if I create header, footer and gridTable with 3 different div's then its difficult to bind datas from database to the gridTable – itzmebibin Mar 08 '16 at 12:04
is the output an actual `table` tag? It shouldn't matter if it's a div or table or whatever. Just add the styles to the CSS class and make sure to have `display:block` – Aziz Mar 08 '16 at 12:19

Vertical scroll bar for gridTable in MVC WebGrid

1 Answers1