htmlcsstwitter-bootstrapjanrain

Janrain Engage Social Login Looks Messed Up in Bootstrap 3

Has anyone else been able to make Janrain Engage and Bootstrap 3.x play nice?

Since updating my project to use Bootstrap 3, the Janrain Engage sign-in widget looks messed up and seems to overflow outside of its borders. According to a post on the Janrain community forum, this is due to Bootstrap's use of box-sizing: border-box;. Janrain claims they cannot make any changes because they need to continue to support IE7, but that as of January 2014, they were discontinuing support for IE7. Nevertheless, the change has not been made and it still looks messed up.

Here's what the Janrain Engage sign-in widget looks like in Chrome:

Chrome

And in Firefox:

Firefox

Unfortunately, the community forum is apparently no longer open for users with free accounts, and I can't seem to get a response from the Janrain engineering team.

I tried disabling box-sizing: border-box; on <div id="janrainModalOverlay">, but it negatively impacts the rest of the layout.

Has anyone else figured out a simple fix for this issue?

Thanks!

Solution

  • I found a very simple fix for this. I'm not sure why I didn't come across this before. In your CSS file, add the following:

    #janrainModal {
  box-sizing: content-box;
}

    Hope that helps someone else out there who is struggling with the same thing.