How to set responsive width on a Sign in with Google (GSI) button with context

user_3758264 0
Viewed 1518

I added Sign in with Google button from https://developers.google.com/identity/gsi/web/guides/personalized-button

The default style fills whole width and looks OK: enter image description here

But if you have an account, it shows it in the context: enter image description here

This context adds width to the element style inside of the iframe. I know that by spec Google button should be within 40-400px range. I wanted to make the page container max-width: 400px, but this button simply doesn't scale together with container.

Do I have to use JavaScript, to update the data-width property or is there a normal solution with CSS?

  <div class="g_id_signin" data-width="400" />
google-signin css
1 Answers

Hack

I used data-width="328" and matched the container to have max-width: 328px

328px with padding can fit on a 360px phone screen (Moto G4, iPhone 6).

  <script src="https://cdn.tailwindcss.com"></script>
  ...
  <div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="w-full space-y-8" style="max-width: 328px">
      <div class="flex flex-col gap-2">
        <div
          id="g_id_onload"
          class="w-full"
          style="display: none"
          :data-client_id="clientID"
          data-callback="handleGoogleCallback"
          data-auto_prompt="false"
          data-auto_select="true"
        />
        <div
          class="g_id_signin w-full"
          data-type="standard"
          data-size="large"
          data-theme="outline"
          data-shape="rectangular"
          data-text="continue_with"
          data-logo_alignment="center"
          data-width="328"
        />
      </div>
    </div>
  </div>

Proper Solution

Wait for Google to update their library. Don't expect it to happen soon.

user_37582640
Related