Question

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

手册我正在阅读：http://docs.jboss.org/richfaces/latest_4_3_X/Component_Reference/en-US/html/chap-Component_Reference-Rich_inputs.html#sect-Component_Reference-richcalendar-Client-side_customization

我的代码：

<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>

我的日历是什么样的：＆＃34; http://snag.gy/LvzvA.jpg＆＃34;

Answer 1

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

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

rich：calendar缩短时间输入字段的大小

1 个答案: