Angular Kendo - 在 CSS 或 SCSS 中设置网格列宽

Question

如何在 Angular SCSS 中设置 Kendo 网格列宽？下面将设置宽度 Angular HTML ,

[width]="80"

但是，我正在尝试将样式属性从 HTML 转移到 CSS。

<kendo-grid [data]="propertyViews" [style.height.%]="100"
  [selectable]="false"
  [filterable]="false"
  scrollable="none"
  [height]="350"
  [sortable]="false"
  [pageable]="false"
  [loading]="loadingData">


    <kendo-grid-column field="ownerCombinedname" title="Full Name" [width]="120">
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <div>{{dataItem.ownerCombinedname}}</div>
        </ng-template>      
    </kendo-grid-column>
    <kendo-grid-column field="address" title="Mailing Address" [width]="80">
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <div>{{dataItem.address}}</div>
        </ng-template>
    </kendo-grid-column>

建议的解决方案：

我尝试在 SCSS 等中这样做，但是它不起作用。似乎 Kendo 超出了我的 CSS 风格 sheet。

td[ng-reflect-logical-col-index="0"] {
    width: 120px;
  }

td[ng-reflect-logical-col-index="1"] {
    width: 80px;
  }

资源：

https://www.telerik.com/blogs/diving-into-the-kendo-ui-grid-with-angular

Answer 1

你把你的 css 放在哪里了？如果它是你的 component.scss 那么它可能是由于风格隔离。

您需要在全局文件中声明 scss。检查 https://blog.angular-university.io/angular-host-context/

让我知道这是否适合你。

Angular Kendo - 在 CSS 或 SCSS 中设置网格列宽

Angular Kendo - Set Grid Column Width in CSS or SCSS

html

css

telerik

kendo-ui

angular