CODEWITHSUNDEEP
cssgoogle-drive-apigoogle-picker
Aamir Rind
Aamir Rind

Reputation: 39659

Show google picker inside/over modal

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

Upvotes: 11

Views: 5537

Answers (5)

Tony BenBrahim
Tony BenBrahim

Reputation: 7290

After setting the picker to visible, I use document.querySelector to find the element with the picker-dialog css class, then set the z-index and position (I found that setting the z-index alone places the dialog in the top left, but that may be an idiosyncracy of Kendo UI):

The example below is from a typescript code base:

this.picker.setVisible(true);
const dialog = document.querySelector('.picker-dialog');
if (dialog) {
    const top = window.innerHeight / 2 - ((dialog as HTMLElement).clientHeight / 2);
    const left = window.innerWidth / 2 - ((dialog as HTMLElement).clientWidth / 2);
    dialog.setAttribute('style', `z-index: 99999;left: ${left}px;top: ${top}px;`);
}

Upvotes: 0

cs-NET
cs-NET

Reputation: 516

I simply added the following CSS:

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

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

Upvotes: 9

Ali Fattahian
Ali Fattahian

Reputation: 495

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";
    }

Upvotes: 9

Zhichao
Zhichao

Reputation: 41

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;

Upvotes: 4

Aamir Rind
Aamir Rind

Reputation: 39659

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");
    }

Upvotes: 1

Related Questions