Resizing a column in the Bootstrap CSS grid causes adjacent columns to move

I am currently working with a bootstrap grid that includes an expand component.

The issue I am facing is that when I expand one column, the other columns in the same row also shift.

Is there a way to make each column independent of the others?

expand component

<p>
  <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    Toggle
  </button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
  <div >
    <div class="">
      You can collapse this card by clicking Toggle
    </div>
  </div>
</div>

app component ( container )

<div class="row">
  <div *ngFor="let card of cards; let index=index" class="col-4 col-sm-4 col-xl-4">
    <app-expend></app-expend>
  </div>
</div>

This is the current behavior:

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

This is the expected behavior:

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

Here's an example that demonstrates the issue I am facing

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

Angular provides the capability to sort through data using various criteria

I have received an array of objects in a specific format from the server, which may contain more than 2 objects. [ {processId : 1, processName : "process1", country : "germany", companyCode:"IB" , companyHiringType:"FRE", masterClauses:[ {cl ...

The jQuery function is running double even after I cleared the DOM with the empty() method

Twice, or multiple times if going back and forth, the Jquery function is triggered. Upon loading LoginMenu.jsp, WorkOrder.jsp is loaded within a specified ID. Once WorkOrder.jsp loads, it then loads schedule.jsp in the schedule tab defined in WorkOrders.j ...

The CSS code isn't functioning properly on both desktop and mobile views

Here is what I desire to achieve: https://i.sstatic.net/8H4fv.png The CSS code I have is: And the HTML code looks like this: <body> <div class="contanier"> <div id="rightcol">Right Section</div> <div id="content">Cont ...

How can I retrieve dt/dd elements and store them in an array using Simple HTML DOM?

Similar Question: Retrieving data from HTML table using preg_match_all in PHP This is the HTML code snippet: <div class="table"> <dl> <dt>ID:</dt> <dd>632991</dd> <d ...

Triggering a JavaScript function when the mouse moves off an element

Recently, I created the following code snippet for marquee effect. The main functionality it is missing is triggering a function on mouse-over. <marquee class="smooth_m" behavior="scroll" direction="left" scrollamount="3"> <span style="float:le ...

Angular app encounters issue with Firebase definition post Firebase migration

Hey there, I'm currently facing an issue while trying to fetch data from my Firebase database using Angular. The error message 'firebase is not defined' keeps appearing. var config = { databaseURL: 'https://console.firebase.google. ...

CSS Issue with Background Image not Fully Covering Viewport Width

Why isn't the CSS background covering the entire viewport width when using media query @media (max-width: 62.5em)? https://i.sstatic.net/yvGWd.png I've attempted to use background-size: cover, background-position: top left, and background-repea ...

Unable to confirm authenticity of dynamic form using PHP

I seem to be encountering an issue while attempting to validate my dynamic HTML form using a PHP script. Upon clicking submit, I receive an error stating that there is an undefined index, even though the index is clearly defined. What sets my query apart f ...

Storing data in Angular 2 services for safekeeping

I have multiple sub-components that each receive specific data from a main component. These sub-components only receive the data necessary for display purposes. My goal now is to create a service that can make a request to a server. The problem is, this re ...

Trigger change event on model update in Angular 4 checkboxes

CSS <div class="checkbox-item"> <input type="checkbox" id="1" [(ngModel)]="filter" (change)="onFilterChange($event)"> CheckBox </div> <button (click)="filter = !filter">Change Status</button> JavaScript export class Filt ...

What could be causing my website to automatically adjust the CSS height on its own?

My code looks like this: <li style = "height: 250px;"> <p>Foo</p></li> Despite my efforts, when I visit the website, the height doesn't seem to change. After inspecting the element in Chrome, I discovered that it's s ...

IOS 10.3.3 dilemma: Screen flickering problem plaguing an ionic/cordova application

I'm currently developing a hybrid app using angular on ionic/cordova frameworks. The app works well on android devices, but when I run it on an iPad, there is some screen flickering happening. I've tried searching online for a solution or the cau ...

"Unfortunately, the Ajax Update feature seems to only work properly on

Encountering difficulties with updating records in a PartialView using Ajax. A View is called with @Html.Action("_PartialView", "Controller", new { id = OrderId }) and a PartialView contains an Ajax Form. @model IEnumerable<WebMartin.Models.OrderExecut ...

Angular is set up to showcase every single image that is stored within an array

I am having trouble displaying the images from the "image_url" array using a for loop. The images are not showing up as expected. Here is the content of the array: image_url: [ 0: "https://xyz/16183424594601618342458.5021539.jpg" 1: "https://xyz/1618342459 ...

Obtain the text content of a div using JavaScript

Hello, I am new to Javascript! I have a table structure that looks like this: <table id='master_tbl'> <tbody> <tr id="master_hr'> <td class="myclass"> <table> <tbody ...

How to Invoke a Function from Entry Component to Parent Component in Angular 7

My module includes the DragDropComponent in entry components, where the parent component consumes it like this: Parent Component: upload(data) { const modalRef = this.model.open(DragNDropComponent, { data: data, panelClass: 'defa ...

Adaptable pictures within a set area

My goal is to design a responsive gallery that displays images of various dimensions. I envision having 5 square divs of equal size on a full screen, with each image centered both horizontally and vertically, scaled to fit with some padding that adjusts pr ...

Issues with Firebase Cloud Messaging functionality in Angular 10 when in production mode

Error: Issue: The default service worker registration has failed. ServiceWorker script at https://xxxxxx/firebase-messaging-sw.js for scope https://xxxxxxxx/firebase-cloud-messaging-push-scope encountered an error during installation. (messaging/failed-ser ...

Having difficulty inserting an image with style="background-image:url(' ')" in Rails from the database

Hi everyone! I am new to both Rails and Stack Overflow, and I would really appreciate it if someone could guide me here. I am currently working on a test site that resembles a personal blog. It's mainly for showcasing one user's portfolio. In t ...

Tips for adjusting the size of an image in both the vertical and horizontal axes using CSS

As a beginner in HTML, I am currently facing an issue while trying to display a set of pictures. My goal is to resize the pictures based on the current window size while maintaining the aspect ratio. Despite experimenting with various methods like using wi ...