Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Drive Picker (JavaScript) not mobile friendly / responsive

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.

like image 791
KevInSol Avatar asked Jun 01 '26 14:06

KevInSol


1 Answers

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).

like image 173
Mark Brewster Avatar answered Jun 03 '26 07:06

Mark Brewster



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!