角网格 id 中的 Boostrap 4 显示在卡片之外

如何解决角网格 id 中的 Boostrap 4 显示在卡片之外

我在带有 boostrap 4 的 angular 项目中使用核心 ui 模板 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>

当我点击导航切换器网格时，显示如下。

请让我的网格显示在卡片之外..请让我知道哪里出了问题

编辑：建议我的网格如下所示..对于银行文件管理器选项与网格菜单按钮重叠..请建议

[![在此处输入图片描述][4]][4]

下面编辑的是我的 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',name: 'Id',filterable: true,sortable: true,maxWidth: 200,type: FieldType.number,filter: { model: Filters.inputNumber } },{ id: 'name',field: 'name',name: 'Name',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;
        }));
  }
 
}

我必须在哪里调用 this.angularGrid.resizerService.resizeGrid();？

编辑：我在下面设置

**

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

** 是这样显示的

解决方法

问题在于行中的内容量超出了包含父元素的宽度。你看到它是因为溢出是可见的。 输入元素都有一个固定的宽度，并溢出容器。

代码没有问题。您只是没有所需的空间。

您可以将 id 的 minwidth 和 maxwidth 减小到 5 或 10 之类的值。

所有显示数字的字段都可以更小。也许你可以在那里节省一些空间。电话号码可能不需要 30 个字符的字段。

您也可以通过使用较小的尺寸来缩小内容。

在你的 css 文件中添加一个 css 类：

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

如果这还不够，你可以让你的内容滚动：

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

}

然后你可以在你的 html 中使用这些 css 类来将它们应用到你的元素中：

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