Only the first row is visible

[mfeingold]

I copy pasted the code from the getting started page posted here - the grid shows up, but only the first row is visible, and even that not completely. It turns out that the div with the class ngViewport has its height explicitly set to 0. What am I doing wrong? How can I control the height of the visible portion of the grid?

[sonicparke]

You need to manually set a height to your ngGrid class.

.ngGrid {
height: 300px;
}

[mfeingold]

hmm... Essentially this way I will set height for all grids on my page - right? What if I have several grids with different sizes?

[sonicparke]

Right. You'll probably need to add a class for each grid you want to set at a different height.

.ngGrid {
height: 300px;
}

.ngGrid.grid1 {
height: 350px;
}

.ngGrid.grid2 {
height: 650px;
}

Or something like that.

[mfeingold]

and then what? The ngGrid class is assigned to an internal div by the ngGrid javascript programmatically. Is there a way to control it?

[sonicparke]

The ngGrid class is added to the div that you use the ng-grid declaration on in your html.

Here's a plunker for an example: http://plnkr.co/edit/hUZvR3
There's some extra stuff in there but just look at the div's in the HTML that have the declaration of ng-grid="" on them.

[mfeingold]

Sorry. This is a joke Plunker played on me. I changed the height on the grid div but Plunker decided to ignore the change. Only after I refreshed the entire thing the change actually took.

I got it now,

[sonicparke]

Sorry the plunker didn't work. Apparently it stopped saving my changes late last night. So yes, the plunker was jacked up. Plunker seems to be having issues this morning also so I'm not yet able to fix it. On another note, I'm trying to help you. There's no need to be rude.

[mfeingold]

Wow, man, no way I intended to be rude.

When I was talking about Plunker, it was about me using Plunker to play with my own stuff, not about your plunk. I plyed with the grid in my own plunk and it was throwing me off all the way, that's why I posted the issue.

I do appreciate your effort and you did point me in the right direction. If you feel slighted, I apologize, really. I am just learning the ropes here, and every step takes some effort, so when Plunker throws another monkey wrench I feel a little frustrated.

[sonicparke]

Ah. No sweat. No worries. Yes, plunker does decide to jack things up
sometimes. Now that I re-read your post I get it. Sorry about that.

I've had that happen to me before as we'll. Some things just decide to stop
taking affect until you refresh the while page. It's frustrating. And it
seems that now it won't save any of my changes not sure if it's plunker or
I just need to reboot.

I'm glad you got it working though. It's very nice when you get something
working and can move in to the next piece.

On Jan 4, 2013, at 8:38 AM, Michael Feingold notifications@github.com
wrote:

Wow, man, no way I intended to be rude.

When I was talking about Plunker, it was about me using Plunker to play
with my own stuff, not about your plunk. I plyed with the grid in my own
plunk and it was throwing me off all the way, that's why I posted the
issue.

I do appreciate your effort and you di point me in the right direction. If
you feel slighted, I apologize, really. I am just learning the ropes here,
and every step takes some effort, so when Plunker throws another monkey
wrench I feel a little frustrated.

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/80#issuecomment-11884680.

[robspages]

Actually, the real issue is the that the script is interpreting height: auto; (the default) as height: 0; and falling through to min-height which is set to 20px in the css that comes with the package. This value then gets written in as an inline style for some reason. You can override that behavior by using height: auto !important; until this bug is resolved in the JS (by please not writing a height to the inline style). Doing that will remove the need to for separate, manually updated heights for each grid.

I should note for those who aren't aware and reading this from Google or something that the use of !important is very very bad practice, but I'm cool with it here as a work around while the script is being updated so frequently. Thanks for that by the way.

[mfeingold]

I am not sure if this is the right thing to do, but I got my answer and therefore I feel like closing this issue

[davidjnelson]

the height: auto !important workaround is not working for me.

[Dashue]

Experienced this today, did someone forgot to fix this before closing the issue?

[vinaynijhawan]

any updates on this issue???

Hello,

i am adding rows dynamically to ng grid.

issue:
i have around 24 existing records in my ng grid.
i can see only see one row that i have added.
when i added more rows.. rows are not showing in ng grid, when i increase the height of ng grid via developer tool i can see the rows that i have added . it seems that ng grid is not dynamically increasing the grid height when we are adding more rows.

i have one parent div in which height is set to 650 px
then i have ng grid which has height and width= 100%

its like

i tried auto option for height also in parent div as mentioned in https://github.com/angular-ui/ng-grid/issues/80..but no success

Please advise as this is very critical for us.

thanks

HTML Structure:

""div id="div-report" class="report-container"
div class="gridStyle" ng-grid="gridOptions"
div
div

CSS:
.report-container
{
margin:0px;
width:100%;
overflow:hidden;
position:relative;
height:600px;

}

.gridStyle
{
width: 100%;
height: 100%;

}

[ranadheerrannu]

height: auto !important is not working.
As of now i am using min-height option to show all my records.
Is this issue fixed?

There is a trick to calculate the height depending on the no.of records in the gid.
Default row height is 30px and default header row height is 32.

So if you have 10 records, then the height of your grid is 10*30 + 32 = 332.

Calculate the height by using your data like [(gridData.length)*30 + 32](here gridData is the object you are assigning to your grid) and use some jquery code in your js file to assign this height to your gridStyle class.

[eitankw]

I guess you cannot call it "best practice" but for my very specific needs, this css workaround is was enough:

.ngViewport.ng-scope{
    height: auto !important;
    overflow-y: hidden;
}

.ngTopPanel.ng-scope, .ngHeaderContainer{
    width: auto !important;
}

[ghost]

Thanks eitankw,
this works!

[strangeapparition]

I used eitankw's solution with a minor change:

.ngViewport.ng-scope{
    min-height: 200px !important;
}

It worked, but then requirements changed and I had to increase the min-height to 400px. When loading up the grid, there is a scroll bar down the right side that is the full 400px, but the rows stop about halfway down the viewport (6 rows are visible). When the browser window is resized, the rows suddenly fill the full 400px.

It's no different with height or min-height, and all parent containers are at least 400px in height. Is there a reason why it would fix the first time, but not the second?

[dalvarezmartinez1]

In 2.0.7 the following works for me:
.gridStyle {
border: 1px solid rgb(212,212,212);
height: 100% !important;
}

.ngViewport.ng-scope {
height: 100% !important;
}

The following is because i want it to occupy the whole page in width:

.ngViewport.ng-scope > .ngCanvas {
width: 100% !important;
}

.ngViewport.ng-scope > .ngCanvas > .ng-scope {
width: 100% !important;
border-bottom-width: 0px !important;
}

[SamiraJafari]

Hi
I use this code :
.gridStyle {
direction: rtl;
border: 1px solid rgb(212,212,212);
width: 846px;
height: auto;
}

.ngViewport {
height: auto !important;
min-height: 200px !important;
}
But there were only 6 rows, the first time I ran the program

[gry]

Has someone solved the "6 rows" issue? It's driving me crazy

[ghost]

For me it seems like virtual scrolling is the cause of the problem. I could manage my way out of 6 rows issue by increasing virtualizationThreshold (default is 50 items) so that the grid won't get virtualized.

[mikechabot]

Why is there no way for ng-grid to dynamically set it's height based on the content being iterated over. It seems very sloppy to hardcode a pixel height...

[c0bra]

Because measuring each row after its rendered while you're scrolling quickly will be horrendous performance-wise. There's lots of other virtualization products, ionic had one. They fine allow dynamic heights either and this is why.