UI issue in patch Upgrade - compressed-look dropdown

Hi All,

We have been recently upgraded from 8.4.1 to 8.4.6, the dropdown was bit compressed.

Attached the screenshot for further reference.

UI.png

@AkshithReddyT There should not have been any significant changes between 8.4.1 to 8.4.6.

Documentation of Component styles for controls can be found here and here.

Please could you provide a before- and after-screenshot?

Can you compare the UI Dev Tools code (F12)?

Is this an OOTB dropdown control?

If you test using the UI Gallery OOTB control, do you see the same issue?

Have you overridden the Standard format for Dropdown component in the Skin rule and applied a custom style specific mixin? See other user forum questions, such as this one.

Could you show us if there is any difference based on which browser type you use?

@MarijeSchillern Attached a before screenshot and refer after screenshot above.

Yes, it’s not an OOTB dropdown control, applied a specific styles for custom dropdown & pxUIGalleryDropdown looks different as well when comparing both 8.4.1 and 8.4.6.

Same issue in Chrome V 100.0.4896.127 & IE 11

When I compared the Dev Tools, initially found left padding was missing, and updated the left padding, then with the same padding and same configuration of the custom dropdown in the Skin rule, good in Dev tools as well, but the padding at top & bottom is much less(compressed in 8.4.6) - as attached above.

So, finally thought of updating the required padding in custom dropdown skin rule.

UI2.png

@AkshithReddyT

Looking at the screenshot I assume this is a UI-KIT dropdown control.

Can you verify if it uses the pxDropdown control (OOTB new one) rather than the deprecated PrompSelect or DynamicSelect?

Also, check the skin inheritance on the dopdown format used. Did you override the format, is it a custom format? Is pyEnduser skin still OOTB or specialized?

When you say “applied a specific styles for custom dropdown” is this done in CSS? Badly written CSS can have various side effects.