Footer is overlapped by scrollbar

[rupampatel2006]

In new release (3.0.14), Footer gets overlapped by scrollbar which was working perfectly in previous release. Scroll can be turned off but if both are required together, its an issue.

http://ui-grid.info/docs/#/tutorial/105_footer

Thanks in advance.

[rupampatel2006]

Toggle footer hides last row in grid.

[PaulL1]

@jcompagner: I think this is probably caused by 26a4683, I can't find the pull request, but I think it was implemented by you?

[jcompagner]

i will investigate what to do here, i guess the footer has to go up the scollwidth
But we now also have support for "when needed' what to do exactly then...

Beause if it doesn't show the footer shouldn't be a few pixels up (then constantly an empty space is there) But if it shows we should then push the footer up? (i think this is a bit harder to fix....)

I will build a demo for this to see what we can do

[jcompagner]

ok i checked it out, and for me to solve this one: http://ui-grid.info/docs/#/tutorial/105_footer

.ui-grid-render-container class should not have position:relative but positon:inherit
then for me it works fine the scrollbar does go to the right position

Also for our code base we already do that, we already overwrite the .ui-grid-render-container in our own css and set it to inherit .. (else for use way more stuff goes wrong)

The thing is that when you set it to inherit it pretty much goes to the position that you also would get if you do bottom:-16px so thats in that example quite out of the view (at least for a part because some how that container is 236pixels height and the parent is 250 no idea why it doesn't fully fill it up in the first place)

But i am not really a big css guru so what do you gues think?

[c0bra]

I'll try to look into it, but I am not a css guru either. I wonder if position: inherit will break the pinned containers...

[c0bra]

I'm wrong; thanks for the fix @jcompagner. Looks like inherit works OK.

[cxr29]

Sidebar with pinning will get full width, is that purpose?
And there have 1px gap between the bottom border, is that correct?

[c0bra]

@cxr29 can you please clarify your questions?

[cxr29]

Enable pinning and resize columns feature

Id Column pin left, ColumnB pin right(or not pin)

when .ui-grid-render-container position is relative:

when .ui-grid-render-container position is inherit:

which one style is intend to?

And position is inherit can't scoll to ColumnB and reszie, so buggy; position is relative pinning and resize seems ok. (Firefox 33.0.3)
pin Id and ColumnB:

pin Id and ColumnB and try to resize Id Column

1px gap:

[jcompagner]

about the 1 pixel, is that maybe: https://github.com/angular-ui/ng-grid/blob/master/src/js/core/directives/ui-grid-native-scrollbar.js (line 107/108) ?
is showFooter true somehow?

I guess most of these things are not directly related to this case (or this fix) because doing inherit show it even a bit better? Because relative is i think completely wrong?

Is there no CSS guru that can tell us what to do in the various modes here? I guess we need way more dynamic styling on various places to get all the features working correctly with the various scrollbars

[cxr29]

thanks.

when showFooter is true there is no 1px, always sub 1 seems good.

may be the pinning or resize columns feature or something lead to.

[rupampatel2006]

Thanks all for the fix!

[morungos]

Added a follow-up comment on this one. The switch to position:inherit does have unfortunate consequences for OSX horizontal scrollbars, both on Chrome and Firefox. I haven't a clue why it should be so funny for Macs on two different browsers (and I don't have Windows/Linux to test on, which doesn't help). But I think maybe there's still an issue here.

Without position: inherit

With position: inherit

[Dev63]

To clarify, the fix is for users to override .ui-grid-render-container to position:inherit? Seems to work for me...on Windows.

But I'm leery about making changes to core grid styling like this, since I don't know what else it may affect now or in the future. Also, it sounds like this may be introducing the problem on Macs. Do we know why the Tutorials all look fine, but in some uses cases this occurs? I spent quite a bit of time trying to narrow it down, but so far haven't isolated the trigger (except that it always happens on all my grids).

[morungos]

Yes, I'm beginning to get a vague feeling that the core manipulation of styles, dynamic generation of CSS and use of float: left for positioning, might just be a nest of complexity that's behind a cluster of issues. A big factor seems to be width: 100% and pinning, both of which I kind of have to use because I have many columns. That means shrinking the window moves the floats around. That isn't in any of the tutorials (on pinning at least), which seem fixed in size, so resizing never causes an issue. I'm also not sure how to write selenium tests for the temporary flickering.

[Dev63]

I, too, am using width:100%, although I'm not sure that's what's causing the problems.

Note that the position:inherit workaround causes a problem when a hidden div higher on the page becomes visible (the scrollbar does not displace down). But those separate problems are even worse, because when you then make the div invisible again, the table contents leave space for them at the bottom of the table.

[aqkhana2002]

any help ?