Ultimate Facebook Register Form Field Width

Hi,

We have the facebook register form working, but having some trouble with the styling. Our site is responsive, but on mobile devices (screen width = 320px) the facebook fields extend beyond the end of the page (horizontally) and so are cut off.

As this is in an iframe, I couldn't apply any CSS code. I found this article but wasn't sure how to apply it to your plugin:
http://stackoverflow.com/questions/10387115/facebook-registration-box-coming-out-of-iframe

Could you please help?

Thanks

  • Jack Kitterhing

    Hi there @Sembisoft,

    Hope you're well today and thanks for your question.

    It looks like something that needs changing directly in our plugin to replace the current code that outputs the registration form.

    It appears that we may want to make that standard so it works fields less than 340px in size, I've flagged the lead developer here for his valuable input, thanks for your patience :slight_smile:

    Kind Regards
    Jack.

  • Vladislav

    Hello,

    Fortunately, the registration part is themeable, which will help with this. Can you please first copy the registration template file from the plugin's folder (the file is named lib/forms/registration_page.php) to your theme's root folder. After this, we can edit the file in the theme's folder and that's what the plugin will use.

    To actually apply the solution, please open up the newly copied file and find the IFRAME element - remove everything starting with (and including) "<iframe", up to (and including) the closing "</iframe>". Next, paste this code in its place:

    <fb:registration
    	fields="<?php echo wdfb_get_registration_fields(); ?>"
    	redirect-uri="<?php echo $redirect_url; ?>"
    	width="300"></fb:registration>
    <script>
    (function ($) {
    function resize () {
    	var $reg = $("fb\\:registration"),
    		$parent = $reg.parent()
    	;
    	$reg.attr("width", $parent.width())
    console.log($parent.width())
    	FB.XFBML.parse();
    }
    $(window).on("resize", resize);
    resize();
    })(jQuery);
    </script>

    The registration XFBML works better for small screens, but doesn't allow for percentage width. This is why we have the script below it, which will re-render it on each window resize. The downside to this is that re-rendering might take some brief time, but at least it should work properly. Can you please try it and see if it helps?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.