丰富：日历缩短时间输入字段的大小答案

【问题标题】：rich:calendar shorten size of time input fields丰富：日历缩短时间输入字段的大小
【发布时间】：2014-07-18 02:27:01
【问题描述】：

在所附图片中，您将看到用于设置时间的数字输入字段。通过展开整个日历，我能够更多地展示微调器。我试图弄清楚如何减少数字输入字段的宽度。如果有办法增加微调器箭头的大小，那也会很有帮助。谢谢。

我的代码：

<style type="text/css">
    .rf-cal-sp-btn{
    width : 15px;
    }
    .rf-cal-sp-up{
    width : 20px;
    }
    .rf-cal-sp-down{
    width : 20px;
    }
</style>


<h:panelGroup>          
                <rich:calendar value="#{bean.timeField}" id="id1"  
                        popup="true"  datePattern="M/dd/yyyy hh:mm a"
                        enableManualInput="false" required="true"
                        showApplyButton="true" popupStyle="width:350px;" popupClass="rf-cal-sp-btn rf-cal-sp-up rf-cal-sp-down"
                        requiredMessage="blah blah required">
                        <f:ajax event="change" execute="@this"  bypassUpdates="#{true}"  render="id1 id1Msg"/>
                </rich:calendar>
                <rich:message for="id1" id="id1Msg" />
            </h:panelGroup>

我的日历是什么样的：“http://snag.gy/LvzvA.jpg”

【问题讨论】：

在 Firefox 中检查元素时，我发现使用了以下样式： table .component input {width: 95%;} 这会导致不良效果。但是，当尝试在 forge-styles.css 中更改此样式时，仍在使用中的样式（就像我从未将其注释掉一样）。如何让应用程序使用我正在编辑的 forge-styles.css 而不是使用生成的？

标签： richfaces jboss6.x

【解决方案1】：

不确定外部 CSS 文件，但我能够通过内部样式表解决这个问题。我在 ui:composition 和 form 标签之前添加了这段代码。

<h:head>    
    <style type="text/css">
    #content table .component input {
        width: 70%; 
    }
    </style>
</h:head>

【讨论】：

您可以更具体地使用组件：