How to let my mask not overfill the panel?

Question

I want to put my upload mask in a panel form. The example below does not work properly, the mask overflows the body of the panel. How to make a mask 100% wide of the panel body.

.mask { position: absolute; background-color: rgba(102, 102, 102, 0.5); width: 100%; height: 100%; min-height: 150px; z-index: 9999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .mask .loading { margin: 0 auto; display: block; background-color: #666666; color: #ffffff; width: 100px; height: 100px; padding-top: 20px; padding-left: 22px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-lg-10 col-lg-offset-1"> <h2>Panel Mask</h2> </div> </div> <div class="row"> <div class="col-lg-10 col-lg-offset-1"> <div class="panel panel-default" style="box-sizing: border-box;"> <div class="panel-body"> <div class="mask"> <span class="loading"> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>Loading... </span> </div> <form class="form-horizontal"> <fieldset> <div class="form-group"> <label class="col-md-3 control-label" for="username">名稱</label> <div class="col-md-4"> <input name="username" id="username" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="description">備註</label> <div class="col-md-8"> <textarea class="form-control" id="description" name="description"></textarea> </div> </div> <div class="form-group"> <label class="col-md-3 control-label"></label> <div class="col-md-8"> <button type="button" class="btn btn-default" (click)="save()">Update</button> </div> </div> </fieldset> </form> </div> </div> </div> </div> 

Answer 1

Add the top and left property to your mask.

Then remove the width property and add 15px margin to the right ( right: 15px ) because the stack of loading containers is 15px.

And here you go.

 .mask { position: absolute; background-color: rgba(102,102,102,0.5); height: 100%; min-height: 150px; z-index: 9999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; top: 0; left: 0; right: 15px; } .mask .loading { margin: 0 auto; display: block; background-color: #666666; color: #ffffff; width: 100px; height: 100px; padding-top: 20px; padding-left: 22px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-lg-10 col-lg-offset-1"><h2>Panel Mask</h2></div> </div> <div class="row"> <div class="col-lg-10 col-lg-offset-1"> <div class="panel panel-default" style="box-sizing: border-box;"> <div class="panel-body"> <div class="mask"> <span class="loading"> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>Loading... </span> </div> <form class="form-horizontal"> <fieldset> <div class="form-group"> <label class="col-md-3 control-label" for="username">名稱</label> <div class="col-md-4"> <input name="username" id="username" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="description">備註</label> <div class="col-md-8"> <textarea class="form-control" id="description" name="description"></textarea> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" ></label> <div class="col-md-8"> <button type="button" class="btn btn-default" (click)="save()" >Update</button> </div> </div> </fieldset> </form> </div> </div> </div> </div>