Show google picker inside/over modal

Question

Is there a way to show the google drive picker to be shown inside a custom modal or a div? I have a modal where there will be multiple providers user can choose e.g. google, dropbox. That modal contains all the js and css files in it. So when I click on google drive the picker iframe is embedded into body and behind my modal, although my modal z-index is 1030 and picker iframe zindex is 2292.

enter image description here

The solution which worked for me is adding this code var elements= document.getElementsByClassName('picker-dialog'); for(var i=0;i — Kemal AL GAZZAH, Apr 15 '22 at 10:07

score 9 · Answer 1 · answered Aug 01 '15 at 10:21

I solved this problem by setting the google picker container on front using following code :

    var picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(appId)
        .setOAuthToken(oauthToken)
        .addView(view)
        .addView(new google.picker.DocsUploadView())
        .setDeveloperKey(developerKey)
        .build();
    if (callback)
        picker.setCallback(callback);

    picker.setVisible(true);

    //I put this code to make the container in front.

    var elements= document.getElementsByClassName('picker-dialog');
    for(var i=0;i<elements.length;i++)
    {
        elements[i].style.zIndex = "2000";
    }

This fixes my issue but without (if (callback) picker.setCallback(callback);) if I put this code the googlepicker does not open at all — Kemal AL GAZZAH, Apr 15 '22 at 10:06
I wrote this answer a long time ago, and It may have been changed in these time. In those days, I may have tried to handle result of the picker form using "callback" in my codes. — Ali Fattahian, Apr 18 '22 at 19:22

score 8 · Answer 2 · answered Oct 12 '15 at 13:39

8

I simply added the following CSS:

.picker-dialog-bg {
    z-index: 20000 !important;
}

.picker-dialog {
    z-index: 20001 !important;
}

answered Oct 12 '15 at 13:39

cs-NET

496
4
3

score 4 · Answer 3 · answered Jul 03 '14 at 17:48

4

Actually you can manipulate the picker object after setting it to visible. If picker is the GooglePicker object, the A is the div for the dialog modal. You can set its z-index using JavaScript.

var picker = new google.picker.PickerBuilder().
  addView(self.viewId).
  setOAuthToken(self.oauthToken).
  setDeveloperKey(self.developerKey).
  setCallback(self.pickerCallback).
  build();

  picker.setVisible(true);

  picker.A.style.zIndex = 2000;

answered Jul 03 '14 at 17:48

Zhichao

41
2

1

How did you know `A` is the right div? This isn't documented in the [Picker reference](https://devsite.googleplex.com/picker/docs/reference). I know it does work, but `picker.Ab` points to apparently the same div, yet setting its zindex doesn't do anything. – Dan Dascalescu Dec 04 '14 at 21:39
I've done done this route and it allows me to style the picker very well. run console.info(picker) and you'll get a dump in console of the which element you need to target. – AutoBaker Jul 19 '22 at 12:15

score 1 · Answer 4 · answered May 12 '14 at 20:09

1

Ok found a solution, as mentioned in the picker reference guide there is a function PickerBuilder.toUri() which will return the URI generated by the builder. So we can use that URI and used it in our own iframe:

function createPicker() {
    var picker = new google.picker.PickerBuilder()
        .addView(google.picker.ViewId.DOCUMENTS)
        .addView(google.picker.ViewId.PRESENTATIONS)
        .addView(google.picker.ViewId.SPREADSHEETS)
        .addView(google.picker.ViewId.PDFS)

        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(appID)
        .setOAuthToken(ACCESS_TOKEN)
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .toUri();


        var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
        iframe.attr({
            width: 500,
            height: 500,
            src: picker
        });
        $("<div></div>").append(iframe).appendTo("#my_container");
    }

answered May 12 '14 at 20:09

Aamir Rind

38,793
23
126
164

1

Hello Adnan. Did the callback method (pickerCallback) work from the iFrame? Were you able to get the selected file ids from the iFrame to the parent frame where the createPicker() function actually exists? – Tom Jul 18 '14 at 00:22
1

No The above solution does not work. It works well in showing the picker in the specific iframe but the state is lost hence when files are selected the ids are not returned and picker just refreshes it self. I eventually drop this option and went with default google picker rendering. – Aamir Rind Jul 18 '14 at 01:17
1

Thanks for getting back, Aamir. I wonder what the purpose for this method be then? – Tom Jul 18 '14 at 01:32
@Tom Do you have any idea how I can get the state to be preserved? I'm using google picker in a WebView of a desktop application and have the same problem you explained with this solution. – Mario Ishac Jun 09 '18 at 18:56

Show google picker inside/over modal

4 Answers4

Linked