Here is the code snippet: left block right block
This code displays the left block on the left side of the screen and the right block on the right side, adjusting for different screen sizes. If the screen is smaller than a certain size, it shows the right block below the left block as two separate elements.
To achieve the desired outcome, I want to use ng-if="boolValue" for the right block. When the right block is hidden, I want the left block to be centered on the screen instead of aligned to the left.
What is the best approach to accomplish this?
<div class="row">
<div class="col-sm-6">
left block in center
</div>
<div class="col-sm-6" ng-if="boolValue">
content when right block is hidden (due to false boolValue)
</div>
</div>
Is there a better technique to achieve this? One idea is to use ng-if like this:
<div class="row">
<div class="col-sm-12" ng-if="!boolValue">
left block in center
</div>
<div class="col-sm-6" ng-if="boolValue">
left block in center <same content as above>
</div>
<div class="col-sm-6" ng-if="boolValue">
content when right block is hidden (due to false boolValue)
</div>
</div>
I'm not sure if this is the most efficient way to achieve the desired result.