Css UI网格：列大小调整以溢出网格结束_Css_Angularjs

Css UI网格：列大小调整以溢出网格结束

css angularjs

Css UI网格：列大小调整以溢出网格结束,css,angularjs,Css,Angularjs,我有一个由几列组成的网格。我定义了列定义，包括宽度和最小宽度。此外，我还禁用了水平滚动条 private buildGridColumns(): any { const colMinWidth = "100"; const columnsMap = { name: { name: this.$translate.instant('Name'), field: "documentName",

我有一个由几列组成的网格。我定义了列定义，包括宽度和最小宽度。此外，我还禁用了水平滚动条

 private buildGridColumns(): any {

    const colMinWidth = "100";
    const columnsMap = {
        name: {
            name: this.$translate.instant('Name'),
            field: "documentName",
            minWidth: colMinWidth
        },
        step: {
            name: this.$translate.instant('Col_Step'),
            field: "status",
            width: "150",
            minWidth: colMinWidth,
            cellFilter: "printStatus"
        },
        submitted: {
            name: "Submitted",
            field: "createdTime",
            width: "150",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        pagesNum: {
            name: this.$translate.instant('NumPages'),
            field: "numPages",
            width: "80",
            minWidth: colMinWidth,
            cellFilter: "foreignDocument: this"
        },
        quantity: {
            name: this.$translate.instant('Quantity'),
            field: "numCopies",
            width: "80",
            minWidth: colMinWidth,
            cellFilter: "foreignDocument: this"
        },
        progress: {
            name: "Progress",
            field: "PercentComplete",
            minWidth: colMinWidth,
            cellTemplate:
            "<kd-progress-bar ng-if='!row.entity.isForeign' percentage='row.entity.percentComplete'></kd-progress-bar>" +
            "<div ng-if='row.entity.isForeign' class='kd-progress-unavailable'>N/A</div>"
        },
        duration: {
            name: this.$translate.instant('Duration'),
            field: "estimatedTime",
            minWidth: colMinWidth,
            cellFilter: "foreignDocument: this"
        },
        status: {
            name: this.$translate.instant('Status'),
            field: "docState",
            minWidth: colMinWidth,
            cellFilter: "documentState"
        },
        press: {
            name: this.$translate.instant('Press'),
            field: "dfeName",
            minWidth: colMinWidth
        },
        created: {
            name: this.$translate.instant('Created'),
            field: "createdDtm",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        time: {
            name: this.$translate.instant("Time"),
            field: "createdTime",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            width: "120",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        failTime: {
            name: this.$translate.instant('FailureTime'),
            field: "lastUpdateTime",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            width: "120",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        completeTime: {
            name: this.$translate.instant('CompletionTime'),
            field: "lastUpdateTime",
            minWidth: colMinWidth,
            cellFilter: "date: 'short'",
            width: "120",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        }
    };

    return columnsMap;
}

当向右调整列的大小时，它们“退出”网格，我可以通过滚动看到它们（尽管没有滚动）。如何强制柱保持在轴网边界中

 private buildGridColumns(): any {

    const colMinWidth = "100";
    const columnsMap = {
        name: {
            name: this.$translate.instant('Name'),
            field: "documentName",
            minWidth: colMinWidth
        },
        step: {
            name: this.$translate.instant('Col_Step'),
            field: "status",
            width: "150",
            minWidth: colMinWidth,
            cellFilter: "printStatus"
        },
        submitted: {
            name: "Submitted",
            field: "createdTime",
            width: "150",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        pagesNum: {
            name: this.$translate.instant('NumPages'),
            field: "numPages",
            width: "80",
            minWidth: colMinWidth,
            cellFilter: "foreignDocument: this"
        },
        quantity: {
            name: this.$translate.instant('Quantity'),
            field: "numCopies",
            width: "80",
            minWidth: colMinWidth,
            cellFilter: "foreignDocument: this"
        },
        progress: {
            name: "Progress",
            field: "PercentComplete",
            minWidth: colMinWidth,
            cellTemplate:
            "<kd-progress-bar ng-if='!row.entity.isForeign' percentage='row.entity.percentComplete'></kd-progress-bar>" +
            "<div ng-if='row.entity.isForeign' class='kd-progress-unavailable'>N/A</div>"
        },
        duration: {
            name: this.$translate.instant('Duration'),
            field: "estimatedTime",
            minWidth: colMinWidth,
            cellFilter: "foreignDocument: this"
        },
        status: {
            name: this.$translate.instant('Status'),
            field: "docState",
            minWidth: colMinWidth,
            cellFilter: "documentState"
        },
        press: {
            name: this.$translate.instant('Press'),
            field: "dfeName",
            minWidth: colMinWidth
        },
        created: {
            name: this.$translate.instant('Created'),
            field: "createdDtm",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        time: {
            name: this.$translate.instant("Time"),
            field: "createdTime",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            width: "120",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        failTime: {
            name: this.$translate.instant('FailureTime'),
            field: "lastUpdateTime",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            width: "120",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        completeTime: {
            name: this.$translate.instant('CompletionTime'),
            field: "lastUpdateTime",
            minWidth: colMinWidth,
            cellFilter: "date: 'short'",
            width: "120",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        }
    };

    return columnsMap;
}

这是常规视图：

向右调整大小并向右滚动后，您可以看到“名称”列超出边界（在左侧）

 private buildGridColumns(): any {

    const colMinWidth = "100";
    const columnsMap = {
        name: {
            name: this.$translate.instant('Name'),
            field: "documentName",
            minWidth: colMinWidth
        },
        step: {
            name: this.$translate.instant('Col_Step'),
            field: "status",
            width: "150",
            minWidth: colMinWidth,
            cellFilter: "printStatus"
        },
        submitted: {
            name: "Submitted",
            field: "createdTime",
            width: "150",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        pagesNum: {
            name: this.$translate.instant('NumPages'),
            field: "numPages",
            width: "80",
            minWidth: colMinWidth,
            cellFilter: "foreignDocument: this"
        },
        quantity: {
            name: this.$translate.instant('Quantity'),
            field: "numCopies",
            width: "80",
            minWidth: colMinWidth,
            cellFilter: "foreignDocument: this"
        },
        progress: {
            name: "Progress",
            field: "PercentComplete",
            minWidth: colMinWidth,
            cellTemplate:
            "<kd-progress-bar ng-if='!row.entity.isForeign' percentage='row.entity.percentComplete'></kd-progress-bar>" +
            "<div ng-if='row.entity.isForeign' class='kd-progress-unavailable'>N/A</div>"
        },
        duration: {
            name: this.$translate.instant('Duration'),
            field: "estimatedTime",
            minWidth: colMinWidth,
            cellFilter: "foreignDocument: this"
        },
        status: {
            name: this.$translate.instant('Status'),
            field: "docState",
            minWidth: colMinWidth,
            cellFilter: "documentState"
        },
        press: {
            name: this.$translate.instant('Press'),
            field: "dfeName",
            minWidth: colMinWidth
        },
        created: {
            name: this.$translate.instant('Created'),
            field: "createdDtm",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        time: {
            name: this.$translate.instant("Time"),
            field: "createdTime",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            width: "120",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        failTime: {
            name: this.$translate.instant('FailureTime'),
            field: "lastUpdateTime",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            width: "120",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        completeTime: {
            name: this.$translate.instant('CompletionTime'),
            field: "lastUpdateTime",
            minWidth: colMinWidth,
            cellFilter: "date: 'short'",
            width: "120",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        }
    };

    return columnsMap;
}

网格配置

列定义

此函数用于返回网格的columnDefs

细节并不重要，只是要注意我们问题的宽度定义

 private buildGridColumns(): any {

    const colMinWidth = "100";
    const columnsMap = {
        name: {
            name: this.$translate.instant('Name'),
            field: "documentName",
            minWidth: colMinWidth
        },
        step: {
            name: this.$translate.instant('Col_Step'),
            field: "status",
            width: "150",
            minWidth: colMinWidth,
            cellFilter: "printStatus"
        },
        submitted: {
            name: "Submitted",
            field: "createdTime",
            width: "150",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        pagesNum: {
            name: this.$translate.instant('NumPages'),
            field: "numPages",
            width: "80",
            minWidth: colMinWidth,
            cellFilter: "foreignDocument: this"
        },
        quantity: {
            name: this.$translate.instant('Quantity'),
            field: "numCopies",
            width: "80",
            minWidth: colMinWidth,
            cellFilter: "foreignDocument: this"
        },
        progress: {
            name: "Progress",
            field: "PercentComplete",
            minWidth: colMinWidth,
            cellTemplate:
            "<kd-progress-bar ng-if='!row.entity.isForeign' percentage='row.entity.percentComplete'></kd-progress-bar>" +
            "<div ng-if='row.entity.isForeign' class='kd-progress-unavailable'>N/A</div>"
        },
        duration: {
            name: this.$translate.instant('Duration'),
            field: "estimatedTime",
            minWidth: colMinWidth,
            cellFilter: "foreignDocument: this"
        },
        status: {
            name: this.$translate.instant('Status'),
            field: "docState",
            minWidth: colMinWidth,
            cellFilter: "documentState"
        },
        press: {
            name: this.$translate.instant('Press'),
            field: "dfeName",
            minWidth: colMinWidth
        },
        created: {
            name: this.$translate.instant('Created'),
            field: "createdDtm",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        time: {
            name: this.$translate.instant("Time"),
            field: "createdTime",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            width: "120",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        failTime: {
            name: this.$translate.instant('FailureTime'),
            field: "lastUpdateTime",
            minWidth: colMinWidth,
            cellFilter: "date: 'd/M/yy h:mm a'",
            width: "120",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        },
        completeTime: {
            name: this.$translate.instant('CompletionTime'),
            field: "lastUpdateTime",
            minWidth: colMinWidth,
            cellFilter: "date: 'short'",
            width: "120",
            sort: {
                direction: this.uiGridConstants.DESC
            }
        }
    };

    return columnsMap;
}

private buildGridColumns（）：任意{
const colMinWidth=“100”；
常数列映射={
姓名：{
名称：this.$translate.instant（'name'），
字段：“documentName”，
minWidth:colMinWidth
},
步骤：{
名称：this.$translate.instant（'Col_Step'），
字段：“状态”，
宽度：“150”，
minWidth:colMinWidth，
cellFilter：“打印状态”
},
提交：{
名称：“已提交”，
字段：“createdTime”，
宽度：“150”，
minWidth:colMinWidth，
cellFilter:“日期：'d/M/yy h:mm a'，
排序：{
方向：this.uiGridConstants.DESC
}
},
Pagesum：{
名称：this.$translate.instant（'NumPages'），
字段：“numPages”，
宽度：“80”，
minWidth:colMinWidth，
cellFilter:“外来文件：此”
},
数量：{
名称：this.$translate.instant（'Quantity'），
字段：“numCopies”，
宽度：“80”，
minWidth:colMinWidth，
cellFilter:“外来文件：此”
},
进展：{
名称：“进展”，
字段：“完成百分比”，
minWidth:colMinWidth，
单元模板：
"" +
“不适用”
},
持续时间：{
名称：this.$translate.instant（'Duration'），
字段：“估计时间”，
minWidth:colMinWidth，
cellFilter:“外来文件：此”
},
地位：{
名称：this.$translate.instant（'Status'），
字段：“docState”，
minWidth:colMinWidth，
cellFilter：“documentState”
},
新闻界：{
名称：this.$translate.instant（'Press'），
字段：“dfeName”，
minWidth:colMinWidth
},
创建：{
名称：this.$translate.instant（'Created'），
字段：“createdDtm”，
minWidth:colMinWidth，
cellFilter:“日期：'d/M/yy h:mm a'，
排序：{
方向：this.uiGridConstants.DESC
}
},
时间：{
名称：this.$translate.instant（“时间”），
字段：“createdTime”，
minWidth:colMinWidth，
cellFilter:“日期：'d/M/yy h:mm a'，
宽度：“120”，
排序：{
方向：this.uiGridConstants.DESC
}
},
故障时间：{
名称：this.$translate.instant（'FailureTime'），
字段：“lastUpdateTime”，
minWidth:colMinWidth，
cellFilter:“日期：'d/M/yy h:mm a'，
宽度：“120”，
排序：{
方向：this.uiGridConstants.DESC
}
},
完成时间：{
名称：this.$translate.instant（'CompletionTime'），
字段：“lastUpdateTime”，
minWidth:colMinWidth，
cellFilter：“日期：'短'，
宽度：“120”，
排序：{
方向：this.uiGridConstants.DESC
}
}
};
返回列映射；
}

请提供一个代码示例（如jsfiddle或codepen）好吗？请提供一个代码示例（如jsfiddle或codepen）？