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

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> 替换外部跨度，这似乎可以解决问题，但它在刷新时以一种有趣的方式扭曲了 table。

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

有什么想法吗？

Answer 1

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

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

<span …>
    ::before
</span>

然后检查 CSS 是否有 ::before，您应该会看到：

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

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

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

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

Fully clickable Ajax-Button with RichFaces and Bootstrap

html

javascript

css

richfaces

twitter-bootstrap