Message not centered in jQuery-ui Tabs about blockui

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