Open AlexandruHoisan opened 1 year ago
@ashB100 to investigate further
I'm able to reproduce this every time when running the mock server and using partyId BBS77KXY0
. In the below screenshot I've added this code to the two quick actions and removed the hardcoded css from the psp product card stylesheet:
[lgPaddingTop]="{ xs: 'none', md: 'none', lg: 'md' }"
[lgMarginTop]="{ xs: 'none', md: 'xs', lg: 'lg' }"
However, as you can see in the screenshot, it's displaying the margin and padding for a md
screen instead of lg
. I've attempted to recreate this using the same steps with a retail protection party id and other annuities party ids as well as when running canopy locally but in those cases they are all picking up that it's a lg
screensize correctly.
I also had a look at the code in the DynamicStyleService
as suggested by Ashnita, but couldn't see anything obvious that would be causing this. Might need someone else to take a look.
@ashB100 to investigate further when she has time. Thanks Ashnita!
Prerequisites
Description
This bug affects:
Steps to Reproduce
lgMargin
or thelgPadding
directives, with responsive breakpoints and more than one breakpoint. Eg.:[lgMarginRight]="{ xs: 'none', md: 'xs', lg: 'md' }"
Expected behaviour:
Should set the correct margins and paddings based on the given breakpoints and the viewport.
Actual behaviour:
Sometimes sets the wrong margins and paddings based on the given breakpoints and the viewport.
Recurrence frequency:
Package version
Configuration and environment
Additional Information
I first encountered this when I had a combination of Grid directives alongside those padding and margin directives, and we thought initially that there is an issue with using those together, but later on we saw the same behaviour on some elements that were not using the grid.
If the Directive is used with only one breakpoint it works fine, but the issue appears once you have more than one breakpoint, and it's intermitent.
As a workaround we applied those styles directly in the CSS using canopy breakpoints and spacing values.
Attached are some screen shots with the issue: