带有 RichFaces 和 Bootstrap 的完全可点击的 Ajax 按钮

Question

我正在尝试使用带有 Bootstrap 刷新字形图标的完全可点击的跨度或按钮。使用我继承的代码，图标本身是可点击的，但图标和按钮边框之间的区域不是，即用户感觉好像点击按钮的边缘不起作用。

这是当前代码：

<span class="btn btn-default btn-xs" style="background-color: transparent;">
    <h:commandLink  id="refresh" style="height:25px">
        <span class="glyphicon glyphicon-refresh"></span>       
        <a4j:ajax render="richTable cnt_label scroller"
          execute="richTable cnt_label scroller" event="click" immediate="true"
          oncomplete="richTableRerenderCompleted('refresh')"/>
    </h:commandLink>
</span>

我尝试用<button> 替换外部跨度，这似乎可以解决问题，但它在刷新时会以一种有趣的方式扭曲表格。

直接使用 RichFaces commandButton 或 commandLink 会使一切变得更糟。

有什么想法吗？

Answer 1

由于图标只是一个字母，您可以创建一个按钮并将图标放在标签中。

如果您检查跨度，您应该会看到如下内容：

<span …>
    ::before
</span>

然后检查 ::before 的 CSS，您应该会看到：

.glyphicon-refresh:before {
    content: "\e031";
}

e031是字母的个数，你可以把它转换成一个HTML实体然后这样做：

<h:commandButton value="&#xe031;" styleClass="btn btn-default btn-xs glyphicon">