block-ui doesn't work unless ng-app is on body level

[georgema1982]

It appears to me that if I want to use default blockUI.start(), I have to put ng-app on body tag. Otherwise, blockUI.start() would do nothing.

[McNull]

Hi,

by default the module will use the body element as the main block-ui instance, but you can change this behavior by setting the blockUIConfig.autoInjectBodyBlock to false.

See this example plunker and this part of the readme.

[georgema1982]

This solution works in the similar way as blockUI.instances.get('myBlockUI'). I wonder if it's possble that even though block-ui is on a non-body tag but still blocks the whole page.

[McNull]

It does, but you'll have to set the block-ui attribute to main and add the class block-ui-main to the element.

<!-- Mark the desired containing element as the main block instance -->
<div block-ui="main" class="block-ui-main">
  <p>Lorem ipsum ... </p>
</div>

[georgema1982]

Although it does block the whole screen, but the center of the blocking message is not the center of the whole page. Can the message appear in the center of the whole page?

[McNull]

I assume you mean vertical centered?

You can, but you'll have to use fixed css size dimensions.

.block-ui-message {
  line-height: 50px;
  height: 90px;  /* 50px + padding (2*20px) */
}

.block-ui-message-container {
  top: 50%; /* Move top to 50% screen height */
  margin-top: -45px; /* Pull top 90px * 0.5 back */ 
}

See this plunker: http://plnkr.co/edit/xwqoSRo49U1i3XFpYdnG?p=preview

[georgema1982]

Thanks. It's very helpful.