android - Google Drive Picker (JavaScript) not mobile friendly / responsive

Question

Nov '15 - still looking for a solution.

I'm using the Google Picker API https://developers.google.com/picker/docs/#hiworld to (obviously!) have the user pick a file from their Drive account (select a file for downloading from Drive - not to upload a new file to Drive). This is on a responsive website, not an "app" (native or otherwise).

It works fine on a desktop and tablet, but on a phone the Picker is just too big.

In https://developers.google.com/picker/docs/reference#Picker it says:

PickerBuilder.setSize() Set the preferred dialog size. The dialog will be auto-centered. It has a minimum size of (566,350) and a maximum size of (1051,650).

So it seems it is not designed to work on a phone? Am I missing something, or is there a workaround, or an alternative? It seems very odd that Google would exclude phone users from using the Picker when other services like Dropbox work straight out of the box.

Answer 1

I had a similar problem and managed to solve it by using this css:

@media screen and (max-width: 991px) {
 .picker.modal-dialog {
    max-width: 355px !important;
 }
 .picker.modal-dialog-content.picker-dialog-content{
     max-width: 355px !important;
 }
}

You should be able to adjust the width and media query to suit your needs or do more media quires to make it look nicer in other devices.

I also set the option in the JS to the minimum PickerBuilder.setSize(566,350).