Xpages:表单表格和表单布局行的css

Question

我仍然在努力使用一些css来修改我的Xpages控件。

我有一个表格表，里面有2个表单行。我想让对齐更好一点，通过将元素推向左侧，使它们离边界只有5px。我希望每行之间有更多的空间。

我可以使用一些css在Safari中获得我想要的东西，但它在XPiNC中不起作用，而且我认为css很老套。我使用firebug，我使用Safari中的web开发工具，但似乎仍然有很多猜测。

下面是我希望我的表单是什么样子的：

​

​

下面是我在XPiNC中看到的内容：

​

​

下面是Xpage和css：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:this.resources>
        <xp:styleSheet href="/frmTable.css"></xp:styleSheet>
    </xp:this.resources>

    <xp:div
        style="width:60%;margin-left:auto;margin-right:auto;margin-top:25.0px;margin-bottom:auto">
        <xp:panel>
            <xe:formTable id="formTable1" formTitle="OTM Help Ticket">
                <xe:formRow id="formRow1" label="Status"
                    labelPosition="above">
                    <xe:djTextBox value="#{document1.status}"
                        id="status1" style="width:300px">
                        <xe:this.dojoAttributes>
                            <xp:dojoAttribute name="readOnly"
                                value="true" />
                        </xe:this.dojoAttributes>
                        <xe:this.defaultValue><![CDATA[#{javascript:@Name("[CN]",session.getEffectiveUserName())}]]></xe:this.defaultValue>
                    </xe:djTextBox>
                </xe:formRow>
                <xe:formRow id="formRow2" labelPosition="above"
                    label="Requester" style=".frmTable">
                    <xe:djTextBox value="#{document1.requestor}"
                        id="requestor1" style="width:300px">
                        <xe:this.dojoAttributes>
                            <xp:dojoAttribute name="readOnly"
                                value="true" />
                        </xe:this.dojoAttributes>
                        <xe:this.defaultValue><![CDATA[#{javascript:@Name("[CN]",session.getEffectiveUserName())}]]></xe:this.defaultValue>
                    </xe:djTextBox>
                </xe:formRow>

            </xe:formTable>
        </xp:panel>
    </xp:div>

    </xp:view>




tr.lotusFormField >td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px !important;
}

div.lotusFormLabel{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px !important;   
    font-size: 16px;
    font-weight: bold;

    }

tr.lotusFormFieldRow  > td{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px !important;
}
tr.lotusFormFieldRow > td
{
  padding-bottom: 20px;
  padding-left: 5px !important;
}

div {
padding-left: 0px !important;
}
.lotusFormTitle 
{
  padding-left: 5px !important;
}

Answer 1

你的css也可以在XPiNC中工作。我的猜测是，由于本地缓存，您的更改不会生效。

在XPiNC client中按Ctrl+Shift+Delete键，回答问题“永久删除所有私有数据”，确认后重新加载XPage。