Services Plugins FAQs

Login with apple - vertically stretched logo

Plugins
#1

Hi!
How can I control the login button height? No matter what I set, it always seems to stretch to be too tall. I’ve tried putting it inside of a container with a maximum size, but it still stretches vertically.

Additionally - is there a way to control the login button font, such that I can match it to the rest of my page?

image
image722×766 43.6 KB

image

Lastly, whenever I try to log out after signing in with apple, I get the following error:
“Sorry, your login session has changed / expired… please try again”

Any suggestions on how to resolve this?

1 Like
#2

Hi @damirakyan

Have you tried to put first Apple logo at the top? According to what they says: “to fit the container size”.

image
image1104×280 38.1 KB

#3

The issue with using logo-only is that it doesn’t match the remaining buttons (continue with google, etc). My height is within the suggested range (40px). I’ve also tried putting it inside of a container with a height of 40 and leaving it blank.

1 Like
#4

Hello, @damirakyan
Thanks for reaching out.

@johnmark Thanks for your suggestion. Actually, you are right.
@damirakyan As I can see on your screenshot, the width of the button is 250 px, however, it’s quite a large value, compared to the height of the button.
Thus, I can suggest you to change the width of the button to 50-60 px.
Also, please make sure that you don’t have any conditions for the container, where the button is placed, like “Apple max width…” and etc.

Can you please record a video, where this issue is reproduced?
Unfortunately, I need more details to investigate this case in details.

I am looking to hearing from you soon.
Best regards,

1 Like
#5

Hi Ecaterina!

Thanks for the help. If I change the width of the button to 60 it would be square - which wouldn’t fit the theme or the guidelines. Your guidelines suggest button should be 130-375.

I don’t have any conditions on the surrounding container.

I’m fairly certain this is a bug with the ‘center align’ version of your sign-in.

image

#6

I don’t have any conditions on the surrounding container.

#7

Hello, @damirakyan

I’ve just discussed this with our development team and I need to note that the Width parameter will work correctly only with “Left-Align” mode. I’m afraid that it is related to the way the Apple platform draws the element and we can’t influence it ( we are using official data, provided by the Apple developers).
We will add this to our official documentation.

So, for your case, you can use another mode with smaller Width (whatever you want), that will fit your container and entire page.

Hope it will help you.
Best regards,

1 Like