Jetpack: Widgets: Google Translate widget popover isn't responsive

[chaselivingston]

Steps to reproduce the issue

1. Add the Google Translate widget to a widget area on your site.
2. Open the site on a mobile device and click on the Translate option.
3. Notice that the resulting popover for language selection doesn't show all available languages and can't seem to be navigated or resized.

[jeherve]

Also reported here:
https://wordpress.org/support/topic/google-translate-widget-not-displaying-properly-on-mobile/

[thesacredpath]

This is also coming up in the WordPress.com forums for users who cannot install a plugin (free/personal/premium). Latest: https://en.forums.wordpress.com/topic/google-translate-widget-3?replies=11

Is there anything we can do about this, or is this all on Google? Given it all comes in in an iframe, I'm assuming it's all on Google.

[thesacredpath]

I'm wondering if we can change the display mode of the code that we fetch from Google to something different that works, perhaps a standard drop down? When I select "Tabbed" when creating the widget code for my self-hosted site, the list of languages is a standard dropdown.

[thesacredpath]

In addition to the initial list of languages that come up when you first choose a language, after you do that, a Google Translate bar appears at the top of the screen where you can choose a different language, or cancel the translation. That language dropdown also has the same issue (HTML table, non-responsive).

[jeherve]

Given it all comes in in an iframe, I'm assuming it's all on Google.

That's correct. Changing that behaviour is going to be tricky.

I'm wondering if we can change the display mode of the code that we fetch from Google to something different that works, perhaps a standard drop down?

That could indeed be an option. @artpi What do you think if this suggestion? Is there a specific reason why you went with the Translate dropdown when you first created the widget?

For reference, here are the different options offered by Google:

[artpi]

That could indeed be an option. @artpi What do you think if this suggestion? Is there a specific reason why you went with the Translate dropdown when you first created the widget?

I went with the first stuff that worked, so please feel free to change it :)

[thesacredpath]

I'd vote for the center option - vertical - as it would work better in widgets.

[mgalbritton]

I see we've updated this for Jetpack but can we port the changes to .com as well? I have another report of the widget being cut off in mobile. Site is: https://bblecamere.com/

[scosgro]

Another report here of the Google Translate widget not being responsive. The language they want to be able to translate to is not reachable on tablet or mobile, since it appears off the screen. onetworkclub.com

Tablet screenshot: https://cloudup.com/cFwm3tdXLXP

Mobile screenshot: https://cloudup.com/c626jhAmUY8

[erricgunawan]

Another report of the unresponsive Google Translate widget.
Site: yousufmunshi.com

Mobile screenshot: http://cld.wthms.co/CmZitz

Tablet screenshot: http://cld.wthms.co/W0ciby

The user is looking for a way if the dropdown widget only display the list as only a dropdown and not as a pop up.

[keithlocka8c]

Another report of non mobile-friendly Google Translate Widget...

Chat: 1999735-hc
Follow up ticket: 1003783-zd-woothemes

[rachelmcr]

For internal reference, there's an open ticket on the WordPress.com side for this issue at 7840-wpcom. @jeherve I'm not sure what the normal process is for syncing changes like this from Jetpack back to WordPress.com; is that something that's usually done per PR or in batches?

[jeherve]

@rachelmcr In the future it will be done automatically (see p1HpG7-4iZ-p2). For now it has to be done manually.

I submitted a patch for review in D10767-code.