How to let my mask do not overflow the panel? - css

Question

I want to put my loading mask on the panel form.
The example below doesn't work as expected, the mask is overflowing the panel body. How do I make the mask width 100% 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 a 15px margin from the right (right: 15px), because the gutter of bootstrap 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>