Facebook multi friend selector dialog width is incorrect

In my Facebook application I had an invite friends dialog. The dialog was pretty simple and requires a couple of lines coding. But I faced a big problem when created this dialog. My multi friend selector dialog appeared at the right side of window and half of the dialog was not visible.

I tried to fix it with CSS but it was no luck. When rendering this dialog used iframes and it was not so easy to access code inside of iframes and modify some CSS styles. But two days of looking for solution gave me some results. I found than fb:serverfbml tag has attribute width which was incorrect by default. And changing this attribute helped me to set correct width for invite friends dialog.

Note: width property for invite friends dialog

This width attribute is not CSS attribute but the property of serverfbml tag, that’s why I spend so may hours working on this issue.

Facebook multiselect dialog box: source code

<div id="dialogInviteFriends" style="overflow: hidden; ">
        <fb:serverfbml  width="500px" >
            <script type="text/fbml">
            <fb:fbml>

                <fb:request-form
                        type="your app"
                        content='<fb:req-choice url="http://apps.facebook.com/abc/"
                        label="Accept"/>'
                        invite="true"
                        action="http://apps.facebook.com/abc/"
                        method="POST"
                        target="_top"
                        >

                    <fb:multi-friend-selector
                            actiontext="abc to friends"
                            showborder="true"
                            rows="3"
                            cols="5"
                            email_invite="true"
                            import_external_friends="true"
                            />

                </fb:request-form>
            </fb:fbml>
            </script>
        </fb:serverfbml>
    </div>