angular-busy not fading the backdrop for some of the input fields in html page while promise is running

[MeghaY]

Hello,
Using cg-busy directive in div tag, it should fade/blured that whole div tag's content while the promise is running behind the scenes right. I have cg-busy running all fine in other pages in my angularjs project. But with one of the html page design, one of the input field doesn't fade when promise runs. Here is the sample code

<div class="row" cg-busy="mypromise">
  <form role="form" name="myform" ng-submit="submit()">
  <div class="row">
     <div class="form-group">
             <label for="vname">Name</label>
             <input class="form-control"  type="text" name="vname" id="vname" ng-model="vname" />
     </div>
    <div class="form-group>
           <label for="vurl">URL</label>
           <div class="input-group">
                <span class="input-group-addon">https://</span>
                <input class="form-control" type="text" name="vurl" id="vurl"  ng-  model="vurl"/>
            </div>
     </div>
</div>

<div class="row">
            <div class="col-md-4 col-md-offset-2">
                <button type="submit" ng-click="submitted=true">Button</button>
            </div>
 </div>
</form>
</div>

Everything fades away except this field

<input class="form-control" type="text" name="vurl" id="vurl"  ng-model="vurl"/>

while the promise is running. User can still type something in that box while it has to wait for promises to get resolved. Tried changing the placement of the cg-busy directive but it doesn't resolve the problem. Wondering if angular.js version matters here? Can anyone help or provide me some details related to this issue?

[cgross]

Can you create a plnkr or similar that demonstrates the issue.

[MeghaY]

Here is the plunkr link...
http://embed.plnkr.co/QFoSmxvp2U8CG6HgknaN/preview

You can type anything in those two text boxes. You will see as the promise chain is running everything fades away except the url text box. Here I have use alert box to end the chain. I researched a bit more and found that the 'input-group' class that I am using to add an 'https://' input-group-addon to the text box for formatting provided by bootstrap is not allowing that particular text box to fade. When I removed that input-group class, it worked fine.

<div class="input-group">
                <span class="input-group-addon">https://</span>
                <input class="form-control" type="text" name="vurl" id="vurl"  ng-  model="vurl"/>
</div>

Wondering how can I make this angular-busy work with this particular bootstrap class

[cgross]

It looks like there's a z-index issue. For now, add a style like this to your app:

.cg-busy {
z-index:10000;
}

I'll fix this in a later release.

[MeghaY]

Thanks for responding to my message and helping me out. Sure will add this to my css and will wait for your update :)

[pulkitsinghal]

Thanks @MeghaY and @cgross, I iterated on ur previous plnkr and yes the workaround is nice!
http://embed.plnkr.co/Z9h7rCuZboqUFy53TD6y/preview

[cgross]

Fixed in v4.1