Home/ Questions/Q 6760799
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T14:06:28+00:00

I am using plupload in a from which is loaded dynamically through AJAX and

  • 0

I am using plupload in a from which is loaded dynamically through AJAX and also this form has a captcha image.
I was struggling to make plupload shim to position correctly. Then I found a solution which works in almost all browsers, except Google Chrome. Here is my solution:

<span id="upl_container" style="position:relative;">
    <input type="button" id="my_button" value="Click me to upload something" />
</span>

In uploader settings I set:

        browse_button : 'my_button',
        container : 'upl_container',

Now this makes the shim to be absolutely positioned in a relative parent, where the parent (span) is exactly the size of the button (I could not use div because it takes 100% width of its parent and then plupload has positioning problems on all browsers).

When I inspect the plupload shim settings in Firefox (where it is positioned correctly), I see the following:

element.style {
    background: none repeat scroll 0 0 transparent;
    height: 28px;
    left: 0;
    position: absolute;
    top: -4px;
    width: 78px;
    z-index: 99999;
}

but in Chrome it shows me:

element.style {
position: absolute;
background: transparent;
z-index: 99999;
top: 0px;
left: 146px;
width: 70px;
height: 23px;
background-position: initial initial;
background-repeat: initial initial;
}

Obviously, the left property is much too big.

For now I don’t care if it is a bug or not, I just want to find some workaround how to force left side of plupload to be 0. I tried to add a Javascript code which sets left to 0 in Init, Refresh, PreInit callbacks to plupload, but this does not help, the left side anyway jumps to 146px.

Is there any way to force the left side of shim to be 0px?

(BTW, I have set Flash to be the default plupload runtime with fallback to HTML4 and HTML5).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, so I went with the following ugly code:

    uploader.bind('Refresh', function(up) {
    $('#'+up.settings.container + ' > div').css('left',0);
    $('#'+up.settings.container + ' > div').css('top',0);
    $('#'+up.settings.container + ' > div').css('width','100%');
    $('#'+up.settings.container + ' > div').css('height','100%');
    $('#'+up.settings.container + ' > form').css('left',0);
    $('#'+up.settings.container + ' > form').css('top',0);
    $('#'+up.settings.container + ' > form').css('width','100%');
    $('#'+up.settings.container + ' > form').css('height','100%');
    $('#'+up.settings.container + ' > div').children().css('left',0);
    $('#'+up.settings.container + ' > div').children().css('top',0);
    $('#'+up.settings.container + ' > div').children().css('width','100%');
    $('#'+up.settings.container + ' > div').children().css('height','100%');
    $('#'+up.settings.container + ' > div').children().css('font-size','20px');// default is 999px, which breaks everything in firefox
})

    And yay! it works for flash, htm5, htm4 runimes, tested all on Chrome, Firefox, IE7, IE9. The shim is in place, finally.

    • 0