Horizontal scrolling issue

 

the Ignite grid does not allow us to scroll to the limit of the content.

 

·         Open the sample 

·         Before anything else, try to scroll to the left:

YOU CAN’T

·         Use the grip to enlarge the content:

·         You are stuck, you can’t scroll horizontally.

 

I was able to locate the place where the problem occurs:

 

My assumption is that the totalWidth is *computed* once and never refreshed within the scroll event handler (because it is refreshed only when totalWidth === 0).

Furthermore, it looks like the width() method does not return the correct information for the container (1) and the total (2) width.

 

For instance:

 

 

 

Hello Robert,

Thank you for posting in our community.

In order to ensure that I will provide you with better and more accurate support I will need some additional information regarding your scenario.

Could you please let me know what is the reason why in the rendered event you are setting the overflow-x property of the scrolling container to auto? I am asking because initially, only one column in your grid is displayed. Since autofitLastColumn property is set to true by default this column will extend to the entire width of the grid. In this scenario no horizontal scrollbar is needed. If you resize the column later and its width exceeds the width of the grid a horizontal scrollbar appears by default and you could scroll all the way to the end of this scrollbar. Having this in mind I was wondering what is the purpose of showing this scrollbar in the rendered event of the igGrid and additionally setting hscroller_container to be hidden?

If I comment the code in the rendered event the igGrid behaves as expected on my side. I am attaching your modified sample for your reference.

I am looking forward to hearing from you.

This was a workaround suggested by someone in your support when we could not see a horizontal scroll bar for a fixed height grid. You can view the case history for case – CAS-150367-J5M8K0. the known issue can be found here – http://es.infragistics.com/help/jquery/iggrid_known_issues.html#_Ref367440465

So…

Can you provide us a solution for both problems which is not breaking one or the other?

Hello Robert,

We're digging into it. Stay tuned.

Best regards,
Martin Pavlov
Infragistics, Inc.

Hi,

Just a quick note to inform you that I am now taking care of this account.

We are really looking forward to hear a solution from you as it sounds like the last advice you gave us generated other issues.

– Arnaud

Hello Arnaud,

I have a solution for you which you can find attached. The code is in the igGrid.rendered event.

The small gap on the horizontal scroll bar that is initially observed is caused by the width of the vertical scrollbar which overlaps the TABLE with the data. Since the header doesn't have vertical scrollbar it won't get scrolled in the initial grid state, thus a misalignment may be observed between the header and the data. For this issue I couldn't find a good solution. For the other scenarios the scrollbar should work as expected.

Let me know if it works for you.

Best regards,
Martin Pavlov
Infragistics, Inc.

Hi Martin,

I checked your solution and I confirm that the scrollbar is no more limited.

However, I am still concerned by the header position that does not match the columns one: it does not look professional.

Furthermore, it appears that we have a very complex workaround for something that looks like a basic feature of the grid.

Would there be any chance that your developers have a look into this issue and release a fix for it?

Regards,

– Arnaud

Hello Arnaud,

I'll spend more time trying to fix the header position misalignment and will update you on my progress.

I'll also discuss this issue with my colleagues in order to see whether we can provide a fix for it.

Best regards,
Martin Pavlov
Infragistics, Inc.

Hello Arnaud,

After reviewing thread in case CAS-150367-J5M8K0 I believe that the original problem (which is that horizontal scrollbar is missing and the grid cannot be scrolled horizontally) is only observed on OS X under specific conditions as described in the "Horizontal scrollbar visibility issues on Mac OS" known issue. Can you confirm my observation?

If that's the case I can offer you another approach which enables horizontal scrolling on scroll gestures by manually handling the "wheel" event (I'm also attaching a sample for your reference). Keep in mind that by default the horizontal indicator is not shown (because of the "overflow-x:hidden" rule). In order to show it you need to uncomment the commented code in the "wheel" event handler.

Let me know if this solutions suits your needs.

P.S.: I also logged an internal Development issue with number 194417 so that we can incorporate this solution in our codebase or come up with another solution.

Hope this helps,
Martin Pavlov
Infragistics, Inc.

Hello Arnaud,

Did you have a chance to try my latest solution?
Let me know if you have further questions regarding this subject.

Best regards,
Martin Pavlov
Infragistics, Inc.

Hi Martin,

Actually, I didn't try it because all the problem also occur on windows environment.
Again, if I use the previously attached sample, it doesn't work on IE with the solution we got from you.

We also had other troubles with the grid itself which leaded me to incorporate your previous workaround (with additional fixes) to make it work.

However, as soon as we try to fix something, something else is breaking.
For instance, we now have some grids which are flickering when we reach the end of the vertical scrollbar…

I guess we should start over with a 'simple' usage and see what is wrong to fix it instead of creating workarounds on top of workaround.
I will try to provide you a clean example of the grid in the coming days.

Thanks for coming back to me.
– Arnaud

Hello Arnaud,

Thank you for your feedback. Sorry to hear that things didn't work as expected.
Starting over sounds good to me. We're always ready to help.

Best regards,
Martin Pavlov
Infragistics, Inc.