menu

Questions & Answers

White Space issue around "Sign in with Google" Button and "One Tap" Popup

I am using the new google sign in button and one tap login in angular. Currently, I am using a library @abacritt/angularx-social-login. I tried directly using the /gsi/client script and this one also gave the same result only. Atatching image for reference.

Screenshot

I tried disabling all styles on my application. but nothing changed. When I directly inspect the button/popup and apply some color to body of the dynamically generated iframe, the colors are changing. no other colors are affected.

below is my html setup according to library docs.

<asl-google-signin-button GoogleSigninButtonDirective type='standard' size="large" width="320"
    theme="filled_blue">
</asl-google-signin-button>

below is app module.

{
      provide: 'SocialAuthServiceConfig',
      useValue: {        
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              'clientId_here',
            ),            
          }
        ],
        onError: (err) => {
          console.error(err);
        },
      } as SocialAuthServiceConfig,
    }

The issue seems that not related to this specific package because I tried without using any package and gave same results.

Comments:
2023-01-24 20:42:02
Could you inspect the HTML within the chrome developer tools and check whether there's a background style being applied? That would be a great way to both debug these type of issues in the future and to provide more insight to the person attempting to answer.
Answers(0) :