CODEWITHSUNDEEP
cssasp.net-mvcscrollbarwebgrid
itzmebibin
itzmebibin

Reputation: 9439

Vertical scroll bar for gridTable in MVC WebGrid

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?

Upvotes: 1

Views: 5054

Answers (1)

Aziz
Aziz

Reputation: 7783

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/

Upvotes: 1

Related Questions