Extra spacing caused by css transition

Posted by: itservices on 30 May 2023, 3:46 am EST

    • Post Options:
    • Link

    Posted 30 May 2023, 3:46 am EST - Updated 30 May 2023, 3:51 am EST

    We are currently facing some spacing calculation problem using the ActiveReportsJS 3.2, the problem is related with a transition styling applied to our solution, which is being applied to a wildcard.

    * {
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
    }
    

    The problem is when we remove this styling, we see there is no issue, but we tried to not apply this style only to some ActiveReportsJS CSS class, but it didn’t work. It might be something related with some kind Virtual DOM calculation to the height in-place style.

    Here are some prints with, and without that transition style, so we can see the issue (there is no changes on the RDL between those prints):

    Bad Print:

    Good Print:

    So the question is, there is a way to still use the transition styling with a wildcard without having issues with the Grapecity height calculation, like, a special ActiveReportJS class where it should reset this, or any other alternative?

    Bad Calculated Height:

    Good Calculated Height:

  • Posted 5 June 2023, 12:14 am EST

    Hi,

    Instead of applying transition css over all the objects I would suggest you to specify this styling for certain elements or classes as per your requirement.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels