如何在xPage上收缩分类列

Question

这是我的带有视图控件的简单xPage（bootstrap主题）

我的代码：

<xp:viewPanel rows="30" id="viewPanelFileResource" viewStyle="width:100%" var="rowData">
    <xp:this.data>
        <xp:dominoView var="view1" viewName="File Resources"></xp:dominoView>
    </xp:this.data>
    <xp:viewColumn id="viewColumn1" columnName="FileEntryCategory">
        <xp:viewColumnHeader id="viewColumnHeader1" value="File entry category"></xp:viewColumnHeader>
    </xp:viewColumn>
    <xp:viewColumn columnName="FileEntryTitle" id="viewColumn2">
        <xp:viewColumnHeader id="viewColumnHeader2" value="Title"></xp:viewColumnHeader>
    </xp:viewColumn>
</xp:viewPanel>

第一列被分类。但如何缩小它（见上图）？只设置列宽无济于事。它包装了类别名称。 以及如何在类别图标和名称中添加一些填充。我不想只使用像" " + columnValue

这样的公式

Screenshoot：

Answer 1

删除分类列的列标题是一个简单的修复方法。

霍华德

Answer 2

控制列宽：请参阅霍华德的回答;为了完整性：只需从视图列标题的label元素中删除任何文本。

有很多方法可以将一些填充添加到折叠/展开图像，这些图像是button元素的子元素。我通常会在view列中添加一个样式类，这样我就可以正确地处理子元素（没有直接的方法可以将样式类添加到图像或按钮元素中）。然后在样式表中添加一些css代码，如

.viewColCategoryClass button {padding-right:5px;}