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 prepared a similar sample using igniteui-angular version 8.2.29. I tested it in Mozilla 84.0.2 and Chrome 87.0.4280.88. However, I'm still not able to reproduce any issue on my side.
Here could be found 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.
Additionally, please keep in mind that according to our policy, support for IgniteUI Angular products is applicable to two versions back - the latest stable (version 10) and the previous major version which means that version 8 is considered retired and it is no longer eligible for Developer Support Services.
Having this in mind, I believe that the best suggestion is to upgrade to the newest version.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
Yes, this piece of code worked perfectly in Chrome and Mozilla in my system too. I have made one change in my code i.e. set max-height of igx-column-hiding and it resolved the issue in Mozilla.
Thanks for your support.
I am glad that you managed to achieve your requirement.
Please do not hesitate to let me know if you have any further questions on this matter.
Regards,Teodosia HristodorovaAssociate Software DeveloperInfragistics
Yes, I do have one more question related to show/hide column. Here is my post. Please can you guide me on this issue too.
Hello,A developer is currently working on your question and will provide you with an answer in the mentioned forum thread. Please, keep in mind that according to our support policy we handle a single issue per thread. This helps us ensure that all issues are addressed and handled correctly.If you require any further assistance regarding the Show/Hide column behaving differently in different browsers, please let me know.