Roxy Roxy - 20 days ago 8
CSS Question

CSS: Blurring the div

I have a div like this :

<div class="customer">
<div [ngSwitch]="accessLevel">
<div class="customer" *ngSwitchCase="'ENABLED'">
<h2 class="label">Customer</h2><br>
<span>{{customerData.oldId}}</span><br>
<span>{{customerData.firstName}}</span><br>
<span>{{customerData.lastName}}</span><br>
<span>{{customerData.addressLine1}}</span><br>
<span>{{customerData.email}}</span>
</div>
<div class="customer-blurr" *ngSwitchCase="'DISABLED'"></div>
<div class="customer-blurr" *ngSwitchDefault></div>
</div>
</div>


and in CSS:

.customer{
float: left;
width: 27%;
height: 350px;
box-sizing: border-box;
padding: 15px;
}
.customer-blurr {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
background-color: #ccc;
float: left;
width: 27%;
height: 350px;
box-sizing: border-box;
padding: 15px;
}


when the condition Disabled is true I want my div to be blurred and it works as well but the dimensions/size are different. Please see the attached images to see the size different in relation to the tabs width.

Please help me with this.

Thanks

blurred
Active

Answer

Have your HTML like this

<div class="customer">
<div [ngSwitch]="accessLevel">
<div class="customer" disabled = "{ return *ngSwitchCase }">
<h2 class="label">Customer</h2><br>
<span>{{customerData.oldId}}</span><br>
<span>{{customerData.firstName}}</span><br>
<span>{{customerData.lastName}}</span><br>
<span>{{customerData.addressLine1}}</span><br>
<span>{{customerData.email}}</span>
</div>
<div class="customer-blurr" *ngSwitchDefault></div>
</div>
</div>

and CSS as

.customer{
     float: left;
     width: 27%;
     height: 350px;
     box-sizing: border-box;
     padding: 15px;
}
.customer[disabled=disabled] {
    color: transparent;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    background-color: #ccc;
    float: left;
    width: 27%;
    height: 350px;
    box-sizing: border-box;
    padding: 15px;
}