水平滚动时如何防止 Primefaces 旋钮标签显示在旋钮圆圈之外？

Question

我正在使用 Primefaces 13。我有一个数据表，其中有一列使用

p:knob

显示数字。如果所有列都不适合视口，并且我水平滚动数据表，则旋钮组件的标签将显示在旋钮圆之外。我可以看到它的风格具有绝对位置。将其更改为相对可以解决问题，但标签不会显示在圆圈中，而是显示在圆圈下方。有没有办法防止这种情况发生？

Answer 1

我使用一组有限的旋钮尺寸并为每个尺寸添加一个 CSS 类解决了这个问题。

CSS 看起来像这样：

div.ui-knob input.knob {
    font-size: 16px !important;
    position: relative  !important;
}

div.ui-knob.xs-knob-size-64 input.knob {
    margin-top: -57px !important;
}

div.ui-knob.xs-knob-size-96 input.knob {
    margin-top: -90px !important;
}

div.ui-knob.xs-knob-size-128 input.knob {
    margin-top: -122px !important;
}

div.ui-knob.xs-knob-size-160 input.knob {
    margin-top: -154px !important;
}

div.ui-knob.xs-knob-size-192 input.knob {
    margin-top: -185px !important;
}

div.ui-knob.xs-knob-size-224 input.knob {
    margin-top: -216px !important;
}

div.ui-knob.xs-knob-size-256 input.knob {
    margin-top: -248px !important;
}

旋钮组件根据其尺寸有一个类别，例如：

<p:knob
    height="64" width="64" max="100" min="0" step="1"
    styleClass="xs-knob-size-64"
    value="#{currentRow.descuento}"/>
...
<p:knob
    height="256" width="256" max="1000000" min="0" step="10000"
    styleClass="xs-knob-size-256"
    value="#{currentRow.descuento}"/>

还有一件事。如果旋钮位于

p:column

的

p:dataTable

内，且列不够宽，则可能会被切割。在这种情况下，我将 min-width 添加到这些

p:column

的样式中，以确保列宽至少等于旋钮宽度。