I have added Show/Hide column feature in igx-grid. It is working as expected in Chrome, IE, Edge. But in Mozilla and Safari it works differently. I am attaching both the screenshots of the browsers where it works perfectly and where not.
Please let me know where it has gone wrong in the browsers like Safari and Mozilla and how it can be fixed.
Below is the screenshot of the chrome. I want all the browsers to work similarly.
Screenshot of Mozilla. Here Show/Hide column section does not have the vertical scrollbar so need to scroll the whole grid to view the below columns.
Screenshot of Safari. Here it is show/hide section is cropped and neither can be scrolled down nor the below buttons are visible.
Hello,
I have created a small sample trying to reproduce the described behavior. I am using igniteui-angular version 11.0.9. I tested the sample in Chrome (version 87.0.4280.141), Mozilla (version 81.0.2), and Safari (version 14.0.2 (16610.3.7.1.9) and macOS Big Sur 11.1), however, on my side everything works as expected and the hiding UI has the same appearance in all of the browsers.
Attached you will find my sample for your reference. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce or share any additional details like containers and styles that could be the reason for such behavior. Alternatively, if the behavior cannot be replicated please feel free to provide your own small isolated sample. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach it in this case.
Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.
Thank you for your cooperation.
Looking forward to hearing from you.
Sincerely,Teodosia HristodorovaAssociate Software Developer
1106.zzmivbnay.github.zip
As per my findings, IgxGridBaseDirective in available in Angular 11.0.9 and not in Angular 8.
So, I cannot implement IgxGridBaseDirective in my code as I am using Angular 8 and cannot upgrade it to higher version as of now. Please can you suggest how can I overcome this issue in my case.
I have tested in Mozilla 84.0.2, Mac Safari 13.1 and Chrome 87.0.4280.88.
I have created the app using Angular 8. This is the only major difference I could see. Can this be the reason of this issue.
One more thing I have noticed in your code is that igxPreventDocumentScroll has been used.