How to Ensure the Final Column in an Angular Bootstrap Row Occupies the Remaining Available Space

Within my Angular5 application, there is a container component used to display a row with multiple components arranged in n columns, as shown below:

  <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>

Since the number of columns (n) varies, and I'm arranging them in groups of 3 per line (col-md-4)

Issue: In certain scenarios, the last column fails to fill up the remaining space.

I attempted to address this using the following CSS snippet, but it did not resolve the issue:

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

I am seeking a solution that integrates seamlessly with Bootstrap or Angular directives, or perhaps a responsive CSS approach to achieve the desired layout:

https://i.sstatic.net/mNLxy.png

Any recommendations?

cssangulartwitter-bootstrap-3responsive-designbootstrap-4

Answer №1

Utilize JavaScript to determine if there are either 2 or 1 column in the last row. If so, replace the classes col-md-4 col-lg-4 on the outermost column with flex-grow-1.

If two columns in the last row

/* Highlighting 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>

Ensure you're using the latest version of Bootstrap-4 as older versions might not support flex-grow-1. Otherwise, refer to the code below.

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

Update

You can check for the presence of either two or one column in the last row using columns.length % 3 > 0. If applicable, 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've used col-md-4 as a guideline, but ensure to use a unique class name to avoid conflicts.

// Use unique-class-name for all 'col-md-4' divs
var columns = document.getElementsByClassName('unique-class-name');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to reference a PHP file located outside the same directory as the main PHP file?

My current file structure looks like this: Wamp>www>Newlinks CSS (folder) header.php footer.php Profiles (folder) MainPHPfile.php I'm trying to include the header and footer files into MainPHPfile.php, but it's not working ...

phphtmlcss

Generating dynamic components in Angular relies on a string input

Imagine I have an API that provides me with the following data: { title: 'title1', type: 'FullComponent' }, { title: 'title2', type: 'HalfComponent' }, { title: 'title3', type: 'Half ...

angular

ReactJS not responding to Bootstrap toggler button

My Bootstrap toggler button is not working in ReactJS. I did not include the jQuery scripts because I imported Bootstrap at the top. The button should only appear and function on small devices. import React from 'react'; import 'bootstrap/d ...

javascripthtmlcssreactjsbootstrap-4

Place a picture and words within a submit button

I need assistance with aligning text and a small airplane image on a submit button. Currently, the text is overlapping the image and I am unsure how to fix this issue. How can I adjust the position of the text to display to the right of the button? Is ther ...

htmlcss

Jquery is not displaying the background color of the progress bar

Greetings to all! I am currently working on implementing a progress bar for my website, but I am encountering an issue where the background-color is not displaying correctly on scroll. I would greatly appreciate any assistance with this matter. Below you c ...

javascriptjqueryhtmlcss

Changing the description doesn't affect the fixed height of the box - here's how to do it with CSS

Here are the references I used: GetBootstrap Jumbotron CoreUI Base Jumbotron This is how my script looks like: <template> <div class="wrapper"> <div class="animated fadeIn"> <b-card> <b-row v-for="row in ...

cssvue.jsvuejs2bootstrap-4vue-component

In what way could the border exceed the dimensions of the div?

<head> <meta charset="UTF-8"> <title>Document</title> <style> #Tri{ width:0px; height:0px; border-top: 50px solid yellow; border-right:50px solid red; border-bottom:50px solid green; border-left:50px solid blue; } </style&g ...

htmlcss

Shifting the form to the bottom right corner

Just starting out with HTML5 and CSS, I've been experimenting with different elements. One project I've been working on is a form: <div id="form1"> <form action="demo_form.asp" autocomplete="on" > Departure City & ...

csshtml

The benefits of utilizing "native tags" instead of foreignObject in an SVG

As the creator of the stackoverflow-readme-profile project, I dedicated extensive time and effort to crafting a personalized Stackoverflow profile in the form of an SVG image. Utilizing "native svg tags," I meticulously constructed elements such as: < ...

htmlcsssvg

When the browser width is reduced, the text appears outside of the image

When pasting text into an image in this example, everything looks fine at first. However, as the browser width is reduced, the text starts slipping out of the picture. To make matters worse, unsightly line breaks are also added. Is there a way to prevent ...

htmlimagecss

Utilizing data from the home component in another component: A guide

Here is the code I am working with, showcasing how to utilize (this.categoryType) in another component: getCategoryDetails(){ return this.http.get('ip/ramu/api/api/…') .map((res:Response) => res.json()); } The above code snippet is utilize ...

angulartypescriptionic-framework

The issue I'm facing is that the "background-image" is not resizing automatically when changing orientation in CSS on

I've encountered an issue with displaying an image in the DOM that is sized based on the screen height. While this setup works flawlessly on most browsers and devices I've tested, Safari iOS 7 seems to be causing some trouble. Specifically, in S ...

cssangularjsresponsive-designorientation

Looking to use Jquery to translate an image both on and off the screen with full width and height?

Imagine a scenario where a full-screen image remains hidden upon page load. When a user clicks a link, the image smoothly slides up from the bottom of the page. Upon clicking the image, it should smoothly move off the page as if it were being translated do ...

jqueryhtmlcssimageanimation

Learn how to effectively declare data as global within Angular2 or Typescript

I am facing an issue with fetching the id inside the Apiservice despite being able to get it in the console. Can anyone provide assistance on how to solve this problem? TS: deleteProduct(index,product) { var token = this.auth.getAccessTokenId(); ...

javascriptangulartypescript

Rendering React component within a production build of Angular 7

I've been in the process of gradually moving an Angular app to React. After exploring options like single-spa and nx, I found that they weren't suitable due to the messy script-injected nature of the existing app. So, I decided to go for a semi-m ...

reactjsangularbundlewrapper

The anchor tag dwarfs the element it contains

I'm experiencing an issue on my website where the clickable area of my two images/buttons, labeled Get Started and Learn More, is larger than the actual image itself. I've wrapped the images with anchor tags to link to separate pages, but for som ...

htmlcss

Accessing variables in Angular 2 using an event object

Struggling with accessing variables through an event object. Is there a way to refactor this code? I need to display annotations in my templateUrl after setting them in an event click of the map. Here's the current code snippet: import { Component, O ...

angular

Exploring HTML and CSS backgrounds

I am new to CSS and I have a question regarding design. I want to create a form in the center of my webpage (shown as the black box) with a white background that overlaps the body background (represented by the red lines). For reference, please view this ...

htmlcss

What is the reason behind the failure of the jquery.hide() function on this particular UL element?

Although the submenu displays correctly, it refuses to hide when using the mouseleave function. Oddly enough, a console.log() confirms that an event does trigger at the right moment when the mouse exits the <ul>, yet the submenu remains visible for ...

jquerycsshtml-lists

Div that scrolls independently without affecting the position of other elements

Visit this link for reference <div class="col-10 content" id="content"> <ul> <li>News</li> <li>News</li> <li>News</li> <li>News</li> < ...

htmlcssscroll