[Web Dev] Unwanted box-shadows appearing on buttons

Forum
1

I have been developing a web application using Angular 16 and the Web SDK version 1019 and I am encountering a problem whereby some of my buttons are displaying unwanted box shadow effects. I say “some” because most are not having this problem.

Unaffected button
image

Affected button
image

As possible solutions, I have tried to remove any box-shadow effects setting box-shadow: none
in both my component’s stylesheet and the global stylesheet.

I then tried adding the !important modifier to the attribute value in both local and global stylesheet, but neither solution worked. Then I tried to remove all transitions or animations by default in styles.less but it is still not working.

    transition: none !important;
    animation: none !important;
    box-shadow: none !important;                
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;

When I inspected one of the problematic buttons using DevTools I could not find any problematic styling applied to it compared to the unaffected button.

Unaffected button

image
image560×416 16.1 KB

Affected button

image
image577×634 25.1 KB

2

Hi @luclib,

with the limited information you’ve provided it is hard to support you with this.

Please provide a minimal sample (angular project based on Web SDK with the two buttons) to reproduce this and push this into e.g. GitHub repository.

Regards,
Tristan

3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.