Using a Label to expose a Facebook component + Height issues

Hi,

I have a added a Facebook comment component to my Vaadin-based website. I followed the instructions on FB’s dev site. In this case, they suggest pasting a

tag into the body of the html page. Since I am working with Vaadin, I am doing the same thing by creating a Label component with content mode XHTML and putting the
tag there.

Everything works fine and I can get my FB comment box.

The trouble arises when I add comments and expect the label to resize itself and show the whole list of comments. The label does not resize and part of the comments stay hidden.

Here is a snapshot:

As you can see there is a comment which is cut by the bottom of the red box (the label). *I had to fix the label height to 200px initially - If I leave it as undefined, the height stays 0px. Another piece of info which I think is relevant here is that the fb

tag will generate the comment box into an iframe (I saw that when I looked into the html produced).

Any help on how to make the height adjust dynamically is great.

Thanks,
Hans

Hello Hans,

The label height doesn’t work dynamically.
You can try to set a CSS style (setStyleName(“facebook-comments”)) to this label and put the CSS code below into your style.css:

.facebook-comments { 
height: auto !important;
}

If it doesn’t work I believe you need create a Vaadin Widget to solve your problem.

Regards,

Murara