Google Share button not showing properly if originaly hidden


Tags: jquery,css,google-plus

Problem :

Does anyone know of a solution to how the Google Share button doesn't show properly if it is originally hidden using css display:none on its parent div and then being shown using jquery .show()?

Due to the problem im facing I don't see what code would be relevant to add but I have made a very basic JSFIDDLE that shows the issue.



Solution :

Seems like the Google+ widget detects the space it's in, and in your case is shrinking from 96px to 80px. If you use JavaScript to render then hide it, instead of CSS, you get fix that with:

$('#btn').on('click', function () {
    $('#parent-div').show();
});
setTimeout(function () {
    $('#parent-div').hide();
}, 0)

jsFiddle example


    CSS Howto..

    How to set div height to 100% of chosen print paper?

    How to select siblings between 2 tags of same class using CSS

    How to select via regex all class notations in css file

    How can I make an element fit to fill the right part of the window?

    How to have an unlimited amount of divs shown next to each other

    How to remove spacing between tags?

    How to make this button is CSS with Angled , Drop shadow, Inset shadow with flexibility in width

    How to adjust responsive behaviour of menu bar's elements

    How to set CSS width so that the element will have the exact window width?

    how to display labels inline with inputs, using w3.css

    How to auto margin-left for the message bar

    How to adopt drop down menu for mobile devices? [closed]

    How to make an inline-block box stick to the top? [duplicate]

    How to make footer responsive through CSS?

    How to create flexible div items that break after the line?

    How to style a parent element when the mouse is over a child element?

    Dropdown menu. make it show onclick and not onmouseover

    How do I remove an extra overlay layer on p element?

    How to use css media query to switch animations

    Hiding and Showing Content using CSS3, Want hidden state the be the default

    CSS Sub Menu shows up outside body

    How to set size of a checkbox in table vaadin

    how to add css background color for div tag

    How can I use :nth-child() to select every other
    within ALL children?

    CSS How to erase the border from the image link?

    How to create a gullwing shape with CSS

    CSS: how to create a fixed top header with a fixed width

    How can I add a border INSIDE this element?

    How can I use Javascript to allow navigation between sections using keyboard shortcuts?

    How important are HTML/CSS validation errors like s inside

    s? [duplicate]