Using a Label to expose a Facebook component + Height issues


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.


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.