如何在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样式表。
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
您将CSS放在哪里?如果它是您的component.scss,则可能是由于样式隔离所致。
您需要在全局文件中声明scss。检查https://blog.angular-university.io/angular-host-context/
让我知道这是否适合您。