change bootstrap col-width based on conditions

Question

This is my simple bootstrap code..

<div class="container">
<div class="col-lg-12">

  <div class="col-lg-3">
    <p>
    aaaaaa
    </p>
  </div>
  <div class="col-lg-3">
    <p>
    bbbbb
    </p>
  </div>
  <div class="col-lg-3" ng-show="myVar">
    <p>
    cccccc
    </p>
  </div>
   <div class="col-lg-3">
    <p>
    bbbbb
    </p>
  </div>
</div>
</div>

Here I have placed 4 boxes in a row. I have initialized a variable called myvar.Based on myVar variable some boxes may hide.

So when a boxed is hidden, the width of other boxes should be managed that is width should be increased. there should be no extra space.

If width is col-lg-3 means it should be changed to col-lg-4 when a box is hidden.

fiddle : https://jsfiddle.net/euxcj3qb/14/

How to do this? Can anyone give me some suggestions?

don't you need to do some sort of ng-if on the classes if you want them to change with the var? or a ng-class: https://stackoverflow.com/questions/18172573/angular-ng-class-if-else-expression — Pete, Jun 25 '18 at 09:01
How can I do it with the help of css class?that is adding and removing css class? — krish, Jun 25 '18 at 09:06

Nandita Sharma · Accepted Answer · 2018-06-25T09:29:19.007

5

Use it like this

<div class="container" ng-app="myApp">
<div class="col-lg-12" ng-controller="myController">

  <div class="col-xs-12 col-sm-6 col-md-4"  ng-class="{' col-lg-3': myVar, ' col-lg-4': !myVar}">
    <p>
    aaaaaa
    </p>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4"  ng-class="{' col-lg-3': myVar, 'col-lg-4': !myVar}">
    <p>
    bbbbb
    </p>
  </div>
  <div class="" ng-show="myVar" ng-class="{' col-lg-3': myVar}">
    <p>
    cccccc
    </p>
  </div>
   <div class="col-xs-12 col-sm-6 col-md-4 "  ng-class="{'col-lg-3': myVar, ' col-lg-4': !myVar}">
    <p>
    bbbbb
    </p>
  </div>
</div>
</div>

Updated fiddle

edited Jun 25 '18 at 09:29

answered Jun 25 '18 at 09:04

Nandita Sharma

13,287
2
22
35

I have added class like this `class="col-xs-12 col-sm-6 col-md-4 col-lg-3"` how can I use ng-class here? – krish Jun 25 '18 at 09:07
Add them as well in the ng-class ! See thje updated fiddle – Nandita Sharma Jun 25 '18 at 09:10
This `col-xs-12 col-sm-6 col-md-4` will be common for both conditions? – krish Jun 25 '18 at 09:13
Thank you so much.Please check my answer also. – krish Jun 25 '18 at 09:26

score 2 · Answer 2 · answered Jun 25 '18 at 09:06

You can use ng-class for this, and define your rules there. It will reflect any changes once the variable is changed. Here is a demo:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myVar = false;
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>
  .col-xs-3,
  .col-sm-3,
  .col-lg-3 {
    border: 2px solid red;
  }
  
  .col-xs-4,
  .col-sm-4,
  .col-lg-4 {
    border: 2px solid red;
  }
</style>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <div class="container">
      <div class="row">

        <div ng-class="{'col-xs-3 col-sm-3 col-lg-3':myVar, 'col-xs-4 col-sm-4 col-lg-4':!myVar}">
          <p>
            aaaaaa
          </p>
        </div>
        <div ng-class="{'col-xs-3 col-sm-3 col-lg-3':myVar, 'col-xs-4 col-sm-4 col-lg-4':!myVar}">
          <p>
            bbbbb
          </p>
        </div>
        <div ng-class="{'col-xs-3 col-sm-3 col-lg-3':myVar, 'col-xs-4 col-sm-4 col-lg-4':!myVar}" ng-show="myVar">
          <p>
            cccccc
          </p>
        </div>
        <div ng-class="{'col-lg-3':myVar, 'col-xs-4 col-sm-4 col-lg-4':!myVar}">
          <p>
            bbbbb
          </p>
        </div>
      </div>
    </div>

    <button class="btn btn-default" ng-click="myVar = !myVar">Click
</button>

  </div>

</body>

</html>

You simply need: ng-class="{'col-lg-3':myVar, 'col-lg-4':!myVar}"

score 0 · Answer 3 · answered Jun 25 '18 at 09:11

0

You can use JavaScript for that, just change class when one is hided. Here is how to remove class. Similar is for adding new. Example:

function myFunction() {
    var element = document.getElementById("myDIV");
    element.classList.remove("mystyle");

}

answered Jun 25 '18 at 09:11

NoLimits

59
1
9

That will just remove the class of one element, the question also asks for fixing the width of remaining elements. – pragya.go Jun 22 '21 at 22:49

score 0 · Answer 4 · answered Jun 25 '18 at 09:24

Thanks all for your answers.this gave me a short and expected result

<div class="container">
<div class="col-lg-12">

  <div class="col-lg-3" ng-class={'expandGrid':myVar }>
    <p>
    aaaaaa
    </p>
  </div>
  <div class="col-lg-3" ng-class={'expandGrid':myVar }>
    <p>
    bbbbb
    </p>
  </div>
  <div class="col-lg-3" ng-show="myVar" >
    <p>
    cccccc
    </p>
  </div>
   <div class="col-lg-3" ng-class={'expandGrid':myVar }>
    <p>
    bbbbb
    </p>
  </div>
</div>
</div>

Css:

.expandGrid{
width:33.33334%;
}

Script:

 $scope.myVar = true;

Can I use ng-class along with class? Please correct me If I am wrong.

Yes you can use both...But regarding your answer try avoiding your own styles that interfere with the bootstrap's grid. It may work now but will create grave problems afterwards ! — Nandita Sharma, Jun 25 '18 at 09:27

change bootstrap col-width based on conditions

4 Answers4