Angular Bootstrap css : Force Last Column In a Row To Fill Remaining Empty Space

40
May 16, 2018, at 4:10 PM

In my Angular5 app, I have a container component that I'm using to declare a row containing some components organized in n columns like the following:

  <div class="row  mx-5 my-5 h-75 w-80">
    <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess">
      <myComponent1></app-myComponent1>
    </div>
    <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
      <myComponent2></myComponent2>
    </div>
    <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
      <myComponent3></myComponent3>
    </div>
    <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
      <myComponent4></myComponent4>
    </div>
    <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess">
      <myComponent5></myComponent5>
    </div>
    <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess">
      <myComponent6 ></myComponent6>
    </div>
     .... 
  </div>

As the number of my columns (n) is variable, and as I'm organizing columns by 3 in every line (col-md-4)

KO: In some cases, the last column doesn't fill the empty space (which is my goal).

I've tried to do it with the following CSS, but it didn't solve my problem:

.row :last-child {
width: 100%;
height: 100%;
}

I'm looking how to do it natively with Bootstrap or Angular directives, or some responsive CSS treatment to obtain such a final view:

Suggestions?

Answer 1

With js find if there are 2 or 1 column in the last row. If so, remove col-md-4 col-lg-4 classes from the outer most column and instead use flex-grow-1.

If two columns in the last row

/* This code is two outline the columns */ 
 
.row>div { 
  height: 400px; 
  border: 1px solid red; 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/> 
 
 
<div class="row  mx-5 my-5 h-75 w-80"> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess"> 
    <myComponent1> 
      </app-myComponent1> 
  </div> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess"> 
    <myComponent2></myComponent2> 
  </div> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess"> 
    <myComponent3></myComponent3> 
  </div> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess"> 
    <myComponent4></myComponent4> 
  </div> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess"> 
    <myComponent5></myComponent5> 
  </div> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess"> 
    <myComponent6></myComponent6> 
  </div> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess"> 
    <myComponent6></myComponent6> 
  </div> 
  <div class="m-0 p-0 flex-grow-1" *ngIf="advancedSearchSrcdAccess"> 
    <myComponent6></myComponent6> 
  </div> 
</div>

If one column in the last row

.row>div { 
  height: 400px; 
  border: 1px solid red; 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" /> 
<div class="row  mx-5 my-5 h-75 w-80"> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess"> 
    <myComponent1> 
      </app-myComponent1> 
  </div> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess"> 
    <myComponent2></myComponent2> 
  </div> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess"> 
    <myComponent3></myComponent3> 
  </div> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess"> 
    <myComponent4></myComponent4> 
  </div> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess"> 
    <myComponent5></myComponent5> 
  </div> 
  <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess"> 
    <myComponent6></myComponent6> 
  </div> 
 
  <div class="m-0 p-0 flex-grow-1" *ngIf="advancedSearchSrcdAccess"> 
    <myComponent6></myComponent6> 
  </div> 
</div>

Remember to use the latest version of Bootstrap-4 because lower version does not have flex-grow-1. Otherwise, use the code below.

.flex-grow-1 { 
  -ms-flex-positive: 1 !important; 
  flex-grow: 1 !important; 
}

Update

You can use columns.length % 3 > 0 to check if there are two or one column in the last row. If so, remove col-md-4 and add flex-grow-1.

var columns = document.getElementsByClassName('col-md-4'); 
 
// check if there are less than three column in the last row 
if (columns.length % 3 > 0) { 
  var lastColumn = columns.item([columns.length - 1]) 
  lastColumn.classList.remove("col-md-4") 
  lastColumn.classList.add("flex-grow-1") 
}
.row > div { 
  height: 400px; 
  border: 1px solid red; 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/> 
<div class="row  mx-5 my-5 h-75 w-80"> 
  <div class="col-md-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess"> 
    <myComponent1> 
      </app-myComponent1> 
  </div> 
  <div class="col-md-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess"> 
    <myComponent2></myComponent2> 
  </div> 
  <div class="col-md-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess"> 
    <myComponent3></myComponent3> 
  </div> 
  <div class="col-md-4 m-0 p-0" *ngIf="simpleSearchSrcdAccess"> 
    <myComponent4></myComponent4> 
  </div> 
  <div class="col-md-4  m-0 p-0" *ngIf="simpleSearchSrcdAccess"> 
    <myComponent5></myComponent5> 
  </div> 
  <div class="col-md-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess"> 
    <myComponent6></myComponent6> 
  </div> 
  <div class="col-md-4 m-0 p-0" *ngIf="advancedSearchSrcdAccess"> 
    <myComponent6></myComponent6> 
  </div> 
</div>

I use col-md-4 just to tell you what to do, but you must use a unique class-name so that it does not interfere with the other codes.

// unique-class-name should be used on all 'col-md-4' divs 
var columns = document.getElementsByClassName('unique-class-name');

READ ALSO
How to remove the name of a parent div a class with C # Razor?

How to remove the name of a parent div a class with C # Razor?

In jQuery you can get the parent element of a div element and remove the class, something similar to this:

67
Asp.net Core - where are these CSS/LESS files coming from?

Asp.net Core - where are these CSS/LESS files coming from?

I created a default Aspnet Core web app and ran it

50
Ngx-bootstrap popover positioning auto not working as expected on right side of screen?

Ngx-bootstrap popover positioning auto not working as expected on right side of screen?

I'm trying to implement some popovers on our application (Using Angular 60

70
Examine/toggle CSS pseudo-classes in browser developer tools

Examine/toggle CSS pseudo-classes in browser developer tools

We have a few dozen CSS pseudo-classesMost browsers' developer tools allow us to examine/toggle only a handful of them like :hover, :focus, :active

47