Message not centered in jQuery-ui Tabs

[marmz]

When using block() on elements contained in jQuery Tabs, we have wrong centering. Here's an example:

http://www.codipe.it/mzweb/test/blocktabs.php

Now try to navigate through Tabs ... As you can see, in the 1st Tab the "Please wait" message is well centered. Instead, in all other Tabs, it goes to the upper-left corner of the blocked DIV.

The problem does not extend to the dark overlay, which covers exactly the space of the blocked DIV.

I hope this project is still maintained and someone read this ;)

[CZEMacLeod]

I, too, have had this issue for ages, but have just put up with it. I hope someone can help!

[marmz]

For now the only "workaround" i found is to set:

$.blockUI.defaults.centerX = false;
$.blockUI.defaults.centerY = false;

But then you must adjust top/left coords. manually ... Not a really flexible solution!

We should find the best "centering" paradigm, then modify the center(el, x, y) function inside blockUi code :/

Let me know if you go farther in this .. I'll do the same! ;)

[mafar]

This is what I use for hidden divs (tab-pane not active is hidden). since divs are hidden, message is not centered. Only caveat of this solution is , it is centered horizontally not vertically https://jsfiddle.net/bababalcksheep/4kc3sg6e/59/

        centerX:false,
        centerY:false,
         'css': {
           'border': '0',
           'padding': '0',
           'width': '100%',
           'height': '100%',
           'top': '0',
           'left': '0',
         },
         'overlayCSS': {
           'backgroundColor': '#000',
           'opacity': 0.1,
           'cursor': 'wait'
         }

[mafar]

https://jsfiddle.net/bababalcksheep/4kc3sg6e/83/

  //  uses https://github.com/dreamerslab/jquery.actual
  // to center message block
  function center(el) {
    var parentNode = el.parent();
    var parentNode_BLW = parseInt(parentNode.css('border-left-width'), 10) || 0;
    var parentNode_BTW = parseInt(parentNode.css('border-top-width'), 10) || 0;
    var left = ((parentNode.actual('outerWidth') - el.actual('outerWidth')) / 2) - parentNode_BLW;
    var top = ((parentNode.actual('outerHeight') - el.actual('outerHeight')) / 2) - parentNode_BTW;
    el.css('left', left > 0 ? (left + 'px') : '0');
    el.css('top', top > 0 ? (top + 'px') : '0');
  }

You can use this function and you can use it on windows resize or tab shown event or even onBLock event. see fiddle.