Presently, I have implemented a third-party library directive for a UI toggle button. I made some adjustments to the background color and positioning of the toggle button to align with my business requirements. Instead of the default light green for true and light red for false, I opted for a darker green for true and a light grey for false. Additionally, I slightly shifted the toggle button to the left. These modifications are functioning correctly.
However, the primary issue I am facing is that when the page with the toggle button loads, there is a split-second moment where the old style transitions quickly from the default to my updated style. Subsequently, there are no further appearance glitches, only this initial loading issue where elements seem to shift briefly. While not a major problem, I am unable to identify the cause or understand why this occurs. Could it possibly be related to CSS hierarchy?
Key points regarding this matter:
- To identify the necessary classes to override, I utilized the inspector tool since the directive only utilizes an
nz-toggletag. - I have resorted to using
!importantto override styles. While I acknowledge that this may not be ideal practice, it is consistent across the entire project and has been established as the standard method for overriding styles.
Here is a comparison between one rule in my CSS file and the default styling:
.nz-toggle-wrap.true {
background-color: #089900 !important;
right: -16px !important;
width: 50px !important;
height: 28px !important;
}
vs.
.nz-toggle-wrap.true {background-color: #60bd68;}
Any insights on how to address this issue?