Services Plugins FAQs

Formatting Sign-In With Apple Bubble Plug-In

Plugins
#1

Hello,

I’m having trouble formatting my “Sign-In With Apple” plug-in. For some reason I cannot get the text to align itself within the black box. It appears as white text below the black box, regardless of the size or formatting.

Please help.

Thanks,
Alex

#2

Hi @alextfink,

Thanks so much for reaching out to us and for using our plugins :star2:.

Are you referring to the alignment styles provided by Bubble, as shown in the screenshot below?

Screenshot 2024-07-16 at 14.46.45
Screenshot 2024-07-16 at 14.46.45702×1828 115 KB

Could you please send me a screenshot of how the text looks on your side to confirm what you are experiencing? A picture of the settings would also be greatly appreciated :pray:

Hope to hear back from you soon!

Best regards :sunflower:

#3

Hi Dorel,

Thanks for the quick response! Here are a couple screenshots to better explain the issue. You can see the general layout I’m going for in the screenshot below, but you’ll see that the logo is very small and the text is showing up below the group.

image
image495×892 26.6 KB

#4

Here are the settings of the plugin:

image (1)
image (1)259×817 17.8 KB

Any guidance on how to get this to look like the Google and Facebook boxes above?

#5

Hi @alextfink,

Thanks so much for the details :pray:.

From the screenshots, I see that you are not on the latest version, so anything I say might not be viable unless you are using the latest version.

As for the formatting, with the Apple logo being on the left and the text being in the middle, I was not able to find a way to achieve this kind of use case currently. I have created an investigation to further discuss with the developers if this is possible. Also, for the misplaced text, would you mind unchecking the “responsive” checkbox and confirming if the text is back where it should be?

Best regards :hibiscus:

#6

Hi @alextfink,

Hope you are doing well!

The developers have provided a solution for adjusting the gap between the Apple logo and the text, which can be achieved via an HTML element. Please add the code below to an HTML element on your page, and you will be able to modify the gap by changing the percentage after “gap:”.

HTML Code 
<style>
#appleid-signin div[role="button"] div {
  justify-content: stretch!important;
  gap: 17%!important;
}
</style>

We tested this on the latest version that has just been released for the plugin, so we encourage you to update it as we are not sure it will work correctly on previous versions :blush:

Hope to hear back from you soon!

Best regards :sunflower: