Button for connecting to certain Upload Sources cut off on some screen sizes


#1

We are using a couple of the different 3rd party upload sources such as Google Photos and Instagram. We’ve noticed that the button to connect with those services, when the text is long, such as “Connect to Google Photos” on certain mobile screen sizes the button gets cut off on the right side.

Example of emulated iPhone 5:

Looking at the source code this button is within an iFrame inside the widget and as a result we can’t override the CSS for it. It looks like changing the white-space CSS style to something like normal would allow the text on the button to wrap and be able to be displayed without cutting off the button. But again, we can’t override that style due to the iFraming. This seems like something that can only be fixed by Uploadcare.

Please advise. Thanks!


#2

Are you using the upload panel to render the widget’s dialog within a div element? On mobile devices, the default widget takes all the screen space, it should look like this


#3

Yes we’re using the panel. Even if we remove all padding/margin from any containers around the panel the Google Photos button still is slightly cut off on the right side:


#4

Yes, it seems to happen with the Google Photos button only. I’ve passed this to our widget team: we’ll fix this. As a temporary solution, you can change the font size of the “Connect to Google Photos” button with style injection.

let GPhotosStyleFix = '.source-gphotos a {font-size: 16px;}';
uploadcare.tabsCss.addStyle(GPhotosStyleFix);


#5

Thanks so much @achernenko! Appreciate the help and the suggestion!