javascript - Google signin button width and height issue - Stack Overflow

admin管理员组

文章数量:1420213

I am trying to use Google SignIn button in one of my applications. I have got this working fonr on Chrome. But, when I try to lad the page which contains this button in Firefox and IE, the button never showed up, and upon further trouble shooting, I noticed that the height, width and other parameters are set to "1px". I have copied the generated HTML below. Any clues?

<div id="___signin_0" style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 1px; position: relative; height: 1px;"><button style="opacity: 0; z-index: 10000; left: 0px; top: 0px; position: absolute; cursor: pointer; outline: 0px none; width: 1px; height: 1px;">Sign in with Google</button><iframe title="Sign in with Google" data-gapiattached="true" src=";amp;type=red&amp;scope=profile%20email&amp;width=standard&amp;height=standard&amp;cookiepolicy=single_host_origin&amp;clientid=xxxxxxxx&amp;origin=http%3A%2F%2Flocalhost%3A2098&amp;url=http%3A%2F%2Flocalhost%3A2098%2F&amp;gsrc=3p&amp;ic=1&amp;jsh=m%g#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I0_12343&amp;parent=http%3A%2F%2Flocalhost%3A2098&amp;pfname=&amp;rpctoken=42643494" name="I0_1234455" id="I0_1234455" vspace="0" tabindex="0" style="position: static; top: 0px; width: 1px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 1px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" frameborder="0" width="100%"></iframe></div>

Edit: My code that renders the button is as shown below:

 <span id="signinButton" style="display:block">
                  <span                    
                    class="g-signin"
                    data-callback="signinCallback"
                    data-clientid="xxxxxxxxxxxxxxxx"
                    data-cookiepolicy="single_host_origin"                                        
                    data-height="standard"
                    data-width="standard"
                    data-scope="profile email">
                  </span>
                </span>

I am trying to use Google SignIn button in one of my applications. I have got this working fonr on Chrome. But, when I try to lad the page which contains this button in Firefox and IE, the button never showed up, and upon further trouble shooting, I noticed that the height, width and other parameters are set to "1px". I have copied the generated HTML below. Any clues?

<div id="___signin_0" style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 1px; position: relative; height: 1px;"><button style="opacity: 0; z-index: 10000; left: 0px; top: 0px; position: absolute; cursor: pointer; outline: 0px none; width: 1px; height: 1px;">Sign in with Google</button><iframe title="Sign in with Google" data-gapiattached="true" src="https://apis.google./_/widget/render/signin?usegapi=1&amp;type=red&amp;scope=profile%20email&amp;width=standard&amp;height=standard&amp;cookiepolicy=single_host_origin&amp;clientid=xxxxxxxx.&amp;origin=http%3A%2F%2Flocalhost%3A2098&amp;url=http%3A%2F%2Flocalhost%3A2098%2F&amp;gsrc=3p&amp;ic=1&amp;jsh=m%g#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I0_12343&amp;parent=http%3A%2F%2Flocalhost%3A2098&amp;pfname=&amp;rpctoken=42643494" name="I0_1234455" id="I0_1234455" vspace="0" tabindex="0" style="position: static; top: 0px; width: 1px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 1px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" frameborder="0" width="100%"></iframe></div>

Edit: My code that renders the button is as shown below:

 <span id="signinButton" style="display:block">
                  <span                    
                    class="g-signin"
                    data-callback="signinCallback"
                    data-clientid="xxxxxxxxxxxxxxxx."
                    data-cookiepolicy="single_host_origin"                                        
                    data-height="standard"
                    data-width="standard"
                    data-scope="profile email">
                  </span>
                </span>

• javascript
• html
• google-api

Share Improve this question Follow edited Mar 7, 2015 at 18:13 Thomas asked Mar 7, 2015 at 17:01 ThomasThomas 2,12655 gold badges3333 silver badges6060 bronze badges 2

• What is the original code that you have? The generated code is from google button, which is added depending on your original code – Virendra Commented Mar 7, 2015 at 17:17
• @Virendra I have added my code that is used to render the button. – Thomas Commented Mar 7, 2015 at 18:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Google doesn't allow people to change their Logos or Styles thats why whatever the styles you gave is overridden by google script I Think This URL May help https://developers.google./identity/sign-in/web/build-button

I've made a lot of search to also make that work, however, I think googles iframe can't be changed at all. You can set a MINIMUM width but you can't change the width itself and neither the MAXIMUM (which is 400 by default). The height can't be changed at all. It's sad that they're removing the old javascript button (probably because people was making a lot of misconfiguration?), they really need to make style fully customizable. If anyone has the solution let me know too, but I can say after a lot of search and reading their docs that this is not possible (yet)

I was looking at the code builder for google when I found that the data-width attribute for the signin button could be set to a number, instead of standard. Here is an example with your code:

<span id="signinButton" style="display:block">
                  <span                    
                    class="g-signin"
                    data-callback="signinCallback"
                    data-clientid="xxxxxxxxxxxxxxxx."
                    data-cookiepolicy="single_host_origin"                                        
                    data-height="standard"
                    data-width="400"
                    data-scope="profile email">
                  </span>
                </span>

I noticed that you used <span> tags, while in my case, I used <div>s.

本文标签： javascriptGoogle signin button width and height issueStack Overflow