Boostrap 4 in angular grid id showing outside of card

Question

Am using core ui template in my angular project with boostrap 4 page

<div class="animated fadeIn">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <button type="button" class="btn btn-sm mr-1 btn-success" data-toggle="modal"
                        routerLink="/branch/branch-edit">Create New</button>
                </div>
           
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-9">
                            <div class="form-group row" id="grid-container">
                                <angular-slickgrid gridId="branchGrid" [columnDefinitions]="columnDefinitions"
                                    [gridOptions]="gridOptions" [dataset]="dataset"
                                    (onAngularGridCreated)="angularGridReady($event)">
                                </angular-slickgrid>
                            </div>
                 </div>
            </div>
        </div>
    </div>
</div>

when i click navigation toggler grid is showing like this.

Please let me grid is showing outside of card..Pls let me know what did wrong

EDIT: After suggestion my grid like below..For bank filer option is overlapped with grid menu button..Pls suggest

[![enter image description here][4]][4]

EDIT below is my Ts.file

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { AngularGridInstance, Column, GridOption, GraphqlService, GraphqlPaginatedResult, Filters, Formatters, OnEventArgs, FieldType } from 'angular-slickgrid';

import { BankDataService } from 'src/app/core/services/bank-data.service';
import { PageService } from 'src/app/core/services/page.service';


const GRAPHQL_QUERY_DATASET_NAME = 'banks';


@Component({
  templateUrl: './bank-list.component.html',
  styleUrls: ['./bank-list.component.scss']
})
export class BankListComponent implements OnInit {
  angularGrid: AngularGridInstance;
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset = [];

  constructor(private dataService: BankDataService, private router: Router, private pageService: PageService) {
  
  }

  ngOnInit(): void {
    this.columnDefinitions = [
      {
        id: 'edit',
        field: 'id',
        excludeFromColumnPicker: true,
        excludeFromGridMenu: true,
        excludeFromHeaderMenu: true,
        formatter: Formatters.editIcon,
        minWidth: 30,
        maxWidth: 30,
        onCellClick: (e: Event, args: OnEventArgs) => {
          this.router.navigate(['/bank/bank-detail/' + args.dataContext.id]);
        }
      },
      { id: 'id', field: 'id', name: 'Id', filterable: true, sortable: true, maxWidth: 200, type: FieldType.number, filter: { model: Filters.inputNumber } },
      { id: 'name', field: 'name', name: 'Name', filterable: true, sortable: true , maxWidth: 200}
     ];

    this.gridOptions = {
      backendServiceApi: {
        service: new GraphqlService(),
        options: {
          columnDefinitions: this.columnDefinitions,
          datasetName: GRAPHQL_QUERY_DATASET_NAME
        },
        process: (query) => this.getBanks(),
      }
    };
 
  }

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
  }

  getBanks(): Observable<GraphqlPaginatedResult> {

   
    var args = this.pageService.getPageArgs(this.angularGrid);
    console.log(args);
    return this.dataService.searchBanks(args)
      .pipe(map(
        page => {
          var result: GraphqlPaginatedResult = {
            data: {
              [GRAPHQL_QUERY_DATASET_NAME]: {
                nodes: page.items,
               
                totalCount: page.totalCount
              }
            }
          };

          return result;
        }));
  }
 
}

Where i have to call this.angularGrid.resizerService.resizeGrid();?

EDIT:I i set below

**

AngularSlickgridModule.forRoot({
      enableAutoResize: true,
      autoHeight: true,
      alwaysShowVerticalScroll: false,
      autoResize: {
        containerId: 'grid-container',
         sidePadding: 15,
        bottomPadding: 20,
        calculateAvailableSizeBy: 'container' ,
        -----------   if i set below the grid is showing correctly
        maxHeight: 600,   
        minHeight: 250,
        maxWidth: 800,
        minWidth: 200
-----------------
      },

** It is showing like this

Answer 1

The problem is the amount of content in your row that exceed the width of the containing parent element. You see it because overflow is visible. The input elements all have a set width and are overflowing the container.

There is nothing wrong with the code. You just don't have the space you're asking for.

You could reduce the minwidth and maxwidth of id to something like 5 or 10.

All the fields displaying numbers could be smaller. Maybe you can save some space there. The phone number probably doesn't need a 30 characters long field.

You could also make the content small by using a smaller size.

Add a css class to your css file:

.make-smaller input{
font-size:10px;    // make the font small
width:fit-content; // will make is as big as the content
}

If this is still not enough your can make you content scrollable:

.make-scrollable{
overflow-x: scroll;    // make the container scrollable

}

Then you can use these css class in your html to apply them to your elements:

<div class="card-body make-scrolable">  <--- content scrolable 

    <div class="form-group row make-smaller" id="grid-container"> <-- make things smaller

      <angular-slickgrid gridId="branchGrid" 
        [columnDefinitions]="columnDefinitions"
        [gridOptions]="gridOptions" [dataset]="dataset"                                
        (onAngularGridCreated)="angularGridReady($event)">
      </angular-slickgrid>
     </div>