就我而言,我需要在表格中显示大约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在很多方面尝试过,但没有运气。 提前谢谢。
答案 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浏览器禁用主题...