Google Translate conflicts with Twitter Bootstrap v3.1.1 sticky footer

StackOverflow https://stackoverflow.com/questions/22704226

Question

On my site I'm using Bootstrap v3.1.1 and I have a sticky footer, using the base code and styling that can be found here --> http://getbootstrap.com/examples/sticky-footer/

Everything works fine until I enable the Google Translate plugin (translate.google.com/translate_tools) ... here is sample Google Translate plugin code:

<div id="google_translate_element"></div><script type="text/javascript">
            function googleTranslateElementInit() {
              new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'ACCOUNTNUM'}, 'google_translate_element');
            }
            </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

After adding the Google Translate button the footer undocks from sticking at the bottom and instead floats in the same spot in the middle of the page.

Any suggestions on how I could correct this problem ... I'd like to have the sticky footer and also the Google translate plugin on my pages if possible.

Thanks, Neil

Was it helpful?

Solution

Google Translate modifies the <html> tag's height style, and the <body> tag's position and min-height styles. To fix, I modified my css file to reset them to their default values:

html
{
    height: auto!important;
}

body 
{
    position: static!important;
    min-height: 0!important;
}

OTHER TIPS

For some reason, google translate change the way browsers process the footer position reference. To fix it, based on bootstrap stick-footer example, you need to reposition your footer on your css.

Instead use bottom:0; you need to change your bottom instruction to be the same as your footer height but a negative value. 

.footer { position: absolute; min-height: 250px; bottom: -250px; width: 100%; }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top