we try to integrate the igSpreadsheet in a stylewise quiet complex angularjs (1.7) application, by wrapping it in its own directive. As you can see in the screenshot some ui elements are not correctly positioned and sized. E.g. the ui-igspreadsheet-tabitemarea and its childs are only 5px high.
When I move the div which will become the spread out of its directive and way up in the DOM, the elements get sized and positioned correctly.
Since, for what I concluded, all elements position and size get calculated inside the components script I am desperately seeking for ideas what might cause the messed up layout.
btw: Calling the igSpreadsheet constructor with fixed height and width values did not help.
A possible reason for the problem is if the styles affect the spreadsheet container during initialization.
Regarding the second one, this is an igCombo and there is probably some styles (like margin-top) applied on the `.ui-icon` that are overridden by custom styles.
Could you send me an isolated sample replicating the described behavior and if your application is too complex it would be also helpful if you could send me the custom styles that are used.
Looking forward to hearing from you.
Regards, Monika Kirkova, Infragistics
thanks for your reply and your help.
Last night I had an epiphany and indeed, the problem only occurs if the div is hidden at the point of initialization. The solution for our project is to simply make sure the div is visible before calling 'igSpreadsheet()'.
For the '.ui-icon' we indeed had a style overriding the margins.
I am glad that you find my suggestion helpful and were able to solve your issue.
Thank you for using Infragistics components.