代码之家 › 专栏 › 技术社区 › IonicMan

剑道网格在宽度过大时不显示某些列

kendo-grid kendo-ui angular css html

IonicMan · 技术社区 · 2 年前

在我的棱角分明的项目中,我使用剑道网格。它看起来是这样的:

这是相关的代码。html格式:

<mat-card class="f-layoutcard lage-table">
      <kendo-grid
        class="f-table f-searchable"
        [data]="mitarbeiterListForKendoGrid"
        [loading]="loading$ | async"
        [scrollable]="'scrollable'"
        [selectable]="selectableSettings"
        #kendoGridInstance="kendoGrid"
      >
        <kendo-grid-column field="name" title="Nutzername" [width]="150">
        </kendo-grid-column>

        <kendo-grid-column field="vorname" title="Vorname" [width]="150">
        </kendo-grid-column>

        <kendo-grid-column field="nachname" title="Nachname" [width]="150">
        </kendo-grid-column>

        <kendo-grid-column
          field="einsatzOeName"
          title="Einsatz-OE"
          [width]="150"
        >
        </kendo-grid-column>

        <kendo-grid-column
          field="dienstgradName"
          title="Dienstgrad"
          [width]="150"
        >
        </kendo-grid-column>

        <kendo-grid-column
          field="baoStandardFunktionName"
          title="Standardfunktion"
          [width]="150"
        >
        </kendo-grid-column>

        <kendo-grid-column
          field="name"
          title="BAO-Organisation"
          [width]="150"
        >
        </kendo-grid-column>

        <kendo-grid-column field="name" title="Aktion" [width]="150">
        </kendo-grid-column>

        <sh-util-kendo-grid-custom-messages>
        </sh-util-kendo-grid-custom-messages>
        <kendo-grid-messages
          noRecords="Keine DatensÃ¤tze verfÃ¼gbar."
        ></kendo-grid-messages>
      </kendo-grid>
    </mat-card>

CSS格式:

.lage-table {
  overflow-x: scroll; // my goal here was to make the grid horizontally scrollable
}

::ng-deep .f-table {
  min-width: 100%;
}

请注意,第一个可见列是“Nachname”。但它应该以“Nutzername”和“Vorname”开头。

如果删除所有列的宽度,则所有列都将可见(但被压扁)。这就是为什么我添加了宽度和CSS来适应一切。

但是在设置了宽度之后,我可以在元素外部的左侧的开发人员控制台中看到真正的前两列。

我想知道为什么会这样,希望有人能帮助修复它,这样每一个专栏都会被展示出来。

编辑:也许我应该提到这是屏幕:

0 回复 | 直到 2 年前

derstauner 2 年前

不要使用css。依靠剑道部分并阅读 docs 以下为:

当所有列宽都被显式设置,并且累计列宽大于可用的网格宽度时,将出现一个水平滚动条,并遵守所有设置的列宽

IonicMan 2 年前

我发现了错误。一些柱子之所以看不见,是因为不知何故,柱子的宽度超过了剑道网格。

根本问题是剑道网格中的内置CSS align-items: center 。

通过将该行更改为 align-items: baseline ,问题已解决。