Xpages editbox / datepicker控件不在可滚动div内的IE 7中滚动

时间:2013-05-29 09:09:58

标签: xpages lotus-notes lotus xpages-ssjs

就我而言,我需要在表格中显示大约15列。因此,我决定在具有水平可滚动的div内显示该表,以避免滚动到整个页面。

在Firefox中运行良好,但奇怪的部分是在IE 7中,编辑框和日期选择器没有滚动。他们是固定的。其他标签,textarea等正在滚动。

但是没有应用css,我在测试xpage中尝试了相同但没有任何css,但结果相同。

我对默认样式表中的以下样式有疑问 - xsp.css

.xspInputFieldEditBox {
    border: 1px solid #B3B3B3;
    height: 1.25em;
    line-height: 1.5em;
    margin: 0 0.1em;
    overflow: hidden;   <---
    position: relative; <---
}  

我的div表就像这样..测试样本表..

<xp:div style="color: red;overflow-x: scroll;width: 600px;">
    <xp:table>
        <xp:tr>
            <xp:td>
            <xp:label value="Label" id="label1"></xp:label>
            </xp:td>
            <xp:td>
            <xp:label value="Label" id="label2"></xp:label>
            </xp:td>
            ...
            ...
            <xp:td>
            <xp:label value="Label" id="label13"></xp:label>
            </xp:td>
            <xp:td>
            <xp:label value="Label" id="label14"></xp:label>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
            <xp:inputText id="inputText1"></xp:inputText>
            </xp:td>
            <xp:td>
            <xp:inputText id="inputText2"></xp:inputText>
            </xp:td>
            ...
            ...
            <xp:td>
            <xp:inputText id="inputText13"></xp:inputText>
            </xp:td>
            <xp:td>
            <xp:inputText id="inputText14"></xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
            <xp:inputText id="inputText15">
            <xp:dateTimeHelper id="dateTimeHelper5"></xp:dateTimeHelper>
            <xp:this.converter>
            <xp:convertDateTime type="date"></xp:convertDateTime>
            </xp:this.converter>
            </xp:inputText>
            </xp:td>
            ...
            ...
            <xp:td>
            <xp:inputText id="inputText28">
            <xp:dateTimeHelper id="dateTimeHelper18"></xp:dateTimeHelper>
            <xp:this.converter>
            <xp:convertDateTime type="date"></xp:convertDateTime>
            </xp:this.converter>
            </xp:inputText>
            </xp:td>
        </xp:tr>
    </xp:table>
</xp:div>

我通过继承css在很多方面尝试过,但没有运气。 提前谢谢。

1 个答案:

答案 0 :(得分:1)

一个简短的解决方案是: 如果您使用的是标准XPage css,则必须在disableTheme="true"中设置<xp:inputText id="inputText1" disableTheme="true"></xp:inputText>,然后字段将在IE7中滚动,但它们将丢失所有css属性,因此您必须添加一些样式自己。

所以你可以使用:

    <xp:inputText id="inputText1"
        disableTheme="${javascript:!context.getUserAgent().isIE(6,7);}">
    </xp:inputText>

要为旧的IE浏览器禁用主题...