2

I'm using the Facebook XML to load a Facebook comments plugin in my MVC 3 app, like this:

<fb:comments href="@Request.Url.AbsoluteUri" num_posts="15" width="900"></fb:comments>

The problem is that the width property only renders out in pixel value. I would like to specify a percentage width instead. I examined the HTML generated when Facebook's JavaScript renders out the XML tag to full-qualified HTML. It spits out an iframe with inline css specifying the width. The iframe has a class "fb_ltr" and I tried doing a CSS rule for .fb_ltr to change the width, but because the css is inline as a style="" attribute this rule is overridden.

I then tried using jQuery:

$(function()
{
    $('.fb_ltr').css('width', '100%');
});

But that didn't work either because the Facebook JavaScript takes a while to do its job and render the content. Has anyone worked with the Facebook plugins before? Customizing seems kind of convoluted. Is there a way to tie some jQuery on after the Facebook script renders out the comments iframe?

3 Answers 3

3

if you can do it via css why not do it? just add !important and it will override everything. But I doubt that you can do it via css. Example css:

width: 100% !important;
1
  • Thank you. I did not know about !important in CSS. You fixed my issue. I will accept later tonight, it is making me wait...
    – ChevCast
    Commented Mar 14, 2011 at 23:14
1

try attaching a load event to the facebook frame:

$("#comments").load( function() {
    $('.fb_ltr').css('width', '100%');
});
1
  • I did not know I could do this either! Thanks :)
    – ChevCast
    Commented Mar 14, 2011 at 23:15
1

I changed this:

<fb:comments href="http://whatever.com" 
num_posts="10" width="500"></fb:comments>

to this:

<fb:comments href="http://whatever.com" 
num_posts="10" width="100%" style="width:100%"></fb:comments>

and also set the following css:

iframe.fb_ltr { width:100% !important; }

It worked...

1
  • I tried the width="100%" and that did nothing, same with the style="width: 100%;". It was the css rule .fb_ltr { width: 100% !important; } that did it. the inline attributes and styles on the FBXML element do not get rendered to the containing iFrame when javascript renders the contents. But !important does override the inline style that gets set on the rendered iFrame, hence the answer I accepted 2 days ago.
    – ChevCast
    Commented Mar 17, 2011 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.