Tweetbox iframe being set to 0 width and height

[Zac]

Hi All

Please help. I have a tweetbox that was working but isn't now. The
tweetbox is within a hidden layer that gets revealed when an icon is
clicked. The tweetbox now seems to be rendering with the iframe having
inline element styling of width 0, height 0 and overflow hidden.

If I modify the element style through firebug then the tweetbox
renders fine.

I can't effect the element style on the iframe as it's being built by
teh anywhere Javascript.

I've Googled but can't find evidence of other people with the same
problem.

Is there a way to control the element style?

My Tweetbox code:

<script type="text/javascript">
twttr.anywhere(function (T) {
T("#tbox").tweetBox({
height: 200,
width: 350,
label:"Tweet about these:",
defaultContent: "Nice flip flops! <?
=_shorten_googl($shrUrl);?>"
});
});
</script>

The full page can be seen at:

http://www.riderflipflops.co.uk/cape

The twitter icon that shows the failing box is bottom right under the
Share heading.

Thank you for any assistnace or idea on where to look next.

Zac

[RogerL]

Zac,

I just solved this problem myself yesterday and I found it on a forum,
but forgot where.

I only found that his issue affects Firefox 3 and 4. It displays fine
in IE 9, Opera, Safari etc.

Assumptions: You're setting the div/span the iframe is in to
"display:none" and you have a show/hide function to display it.

2 Solutions:

Don't call the Twitter API until your .click or onClick() event is
fired.

Define in your CSS dimensions for your tweetbox.

This is straight from my CSS

#tbox iframe.twitter-anywhere-tweet-box {
height: 140px !important;
width: 600px !important;
display: inline !important;
}

I hope that helps! Let me know if it does
rogermle at gmail dot com

[Matt Harris]

Hey Roger,

Thanks for sharing your solution to this. 

As a bit more background. If you tell the TweetBox to render into a layer that is display: none, some browsers will report the view size as 0,0. Because we use this to determine the available space it means the TweetBox gets rendered with dimensions of 0,0 instead of the ones you specified in the configuration. 

There are a couple of ways to deal with this, one is the way Roger mentioned, the other is to do as we described in a thread around July last year:

    http://groups.google.com/group/twitter-dev-anywhere/msg/ad45f0a1a092665a

Hope that helps,
@themattharris
Developer Advocate, Twitter
http://twitter.com/themattharris

--
Twitter @Anywhere documentation and resources: http://dev.twitter.com/anywhere/begin
@anywhere updates via Twitter: http://twitter.com/anywhere
Change your membership to this group: http://groups.google.com/group/twitter-dev-anywhere?hl=en