comboBox 在 readmode web 中生成表格而不是跨度 [英] comboBox generates a table instead of span in readmode web

问题描述

在 Web 上查看包含一个列中带有组合框的表格的 Xpage 时，Domino 生成的 html 为组合框创建一个表格，但为其他组件创建一个跨度 (目前在 textFields 和计算字段上测试).
然后用一个垂直对齐差异的像素来渲染这让我很恼火.
我怎样才能克服这个问题?

When viewing a Xpage on the web containing a table with a comboBox in a column the html generated by Domino creates a table for the combobox but a span for other components (tested currently on textFields and computedFields).
This is then rendered with a pixel of vertical alignment difference that annoys me.
How can I overcome this?

<table>
        <tbody>
            <tr>
                <td colspan="3">
                    <table id="view:_id1:_id2:_id3:legend1:callbackFieldControlSet:CounterpartyName">
                        <tbody>
                            <tr>
                                <td>
                                    AVANZA SWEDEN
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="view:_id1:_id2:_id3:legend1:callbackFieldControlSet:CounterpartyShort">AVANZA SWEDEN</span>
                </td>
            </tr>
        </tbody>
    </table>

在编辑模式下，差异仍然存在，但组合框生成的 html 不是表格而是选择，然后我可以使用 css 控制它.
见下图.

In edit mode the difference is still there but the generated html of the combobox is not a table but a select and then I can control it using css.
See picture below.

示例阅读模式

示例编辑模式(已编辑 css):

<xp:table>
        <xp:tr>
            <xp:td>
                <xp:label
                    value="Counterparty name:"
                    id="counterpartyName_Label1"
                    for="CounterpartyName"
                >
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:comboBox
                    id="CounterpartyName"
                    value="#{document1.CounterpartyName}"
                    required="true"
                >
                </xp:comboBox>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label
                    value="Counterparty short:"
                    id="counterpartyShort_Label1"
                    for="CounterpartyShort"
                >
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText
                    value="#{document1.CounterpartyShort}"
                    id="CounterpartyShort"
                    required="true"
                    styleClass="xspInputFieldEditBox"
                >
                </xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label
                    value="Bic Code:"
                    id="bicCode_Label1"
                    for="BicCode"
                >
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText
                    value="#{document1.BicCode}"
                    id="BicCode"
                    styleClass="xspInputFieldEditBox"
                >
                </xp:inputText>
            </xp:td>
        </xp:tr>
    </xp:table>

推荐答案

问题是内表有自己的边框(一如既往:一个用于表本身，一个用于 td)需要折叠.只需创建一些 CSS 来处理此问题:

problem is that the inner table has its own borders (as always: one for the table itself and one for the td) which need to be collapsed. Just create some CSS to handle this:

1. 为您的外桌提供自己的风格类，例如"myOuterTable"

2. 然后您的 css 将处理.myOuterTable"中的任何表，如下所示:

1. give your outer table its own style-class e.g. "myOuterTable"

2. your css would then address any table inside ".myOuterTable", like this:

table.myOuterTable 表 {border-collapse: collapse;}

table.myOuterTable table {border-collapse: collapse;}

这在编辑和阅读模式下都可以正常工作，因为只有在阅读模式下你才有额外的内部"表；在编辑模式下，没有什么可以折叠的...

This works fine in both edit and read mode because only in read mode you have that extra "inner" table; in edit mode, there's nothing to be collapsed...

即使在 IE 中也能工作，顺便说一句...

works even in IE, btw...

希望对你有用

这篇关于comboBox 在 readmode web 中生成表格而不是跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！