About render Google button sign in on modal boostrap use firefox v34

Question

I have use google button sign-in on popup (use bootstrap 3) like this:

<div id="popup_modal" class="modal fade">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header" style="height: 45px; border-bottom: none" >
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Login</h4>
        </div>
        <!-- dialog body -->
        <div class="modal-body" >
            <p style="font-size: 14px" id="note_login">U can login with</p>
            <div class="col-xs-5">
                    <a id="with_fb" class="btn btn-info" href="#" style="background: #428bca; margin-bottom: 14px">
                        <span class="fa fa-bold fa-facebook" style="font-size: 16px">  Facebook</span>
                    </a>
            </div>
            <div class="col-xs-5">
              <span id="signinButton">
                    <span
                        class="g-signin"
                        data-callback="signinCallback"
                        data-clientid="YOUR_CLIENT_ID"
                        data-cookiepolicy="single_host_origin"
                        data-scope="email">
                    </span>
              </span>
            </div>
        </div>            
    </div>
</div>

When i run it on Google Chrome or Firefox (version 33) button signin still show and can click. but when i run it on Firefox (verion 34.0.5 - lasttest) i can't see gg button signin on my popup (it rendered) :|

So how can i fix it on FF 34? Thank all for help?

Perhaps you're encountering a `box-sizing` issue? See http://getbootstrap.com/getting-started/#third-parties — cvrebert, Dec 14 '14 at 02:46

score 0 · Accepted Answer · edited May 23 '17 at 11:50

I expect that this is issue is not related to the box-sizing and is some kind of similar to How can I list two Linkedin Follow Buttons in a Twitter Bootstrap Dropdown.

Due to the .modal has set display:none, the iframe included by the Google code gets a heigth and width of only 1px.

Changing the display property of the modal makes no sense here. I also found that implicit setting the display property of col-xs-5 which holds the button does not work too.

A possible solution i found:

1) Load the sign button with CSS hidding:

<div style="position:absolute;top:-9999px;left:-9999px;">              
              <span id="signinButton" style="width:150px;height:30px;">
                    <span
                        class="g-signin"
                        data-callback="signinCallback"
                        data-clientid="1234567"
                        data-cookiepolicy="single_host_origin"
                        data-scope="email">
                    </span>
              </span>   
</div>

2) Move the button to the modal when the modal opens:

$('#popup_modal').on('show.bs.modal', function (e) {
$('#signinButton').appendTo($('#google-button'));
});

The HTML code for your button inside your modal code should look like that shown below:

<div class="col-xs-5">
        <a id="with_fb" class="btn btn-info" href="#" style="background: #428bca; margin-bottom: 14px">
            <span class="fa fa-bold fa-facebook" style="font-size: 16px">  Facebook</span>
        </a>
</div>
<div class="col-xs-5">
    <div id="google-button"></div>
</div>

About render Google button sign in on modal boostrap use firefox v34

1 Answers1