0

私の場合、フォームに約 15 列を表示する必要があります。そこで、ページ全体への横スクロールを避けるために、水平スクロール可能な div 内にそのテーブルを表示することにしました。

Firefox では正常に動作しますが、奇妙な部分は IE 7 にあり、編集ボックスと日付ピッカーがスクロールしませんでした。それらは固定されています。他のラベル、テキストエリアなどはスクロールしていました。

しかし、CSSが適用されていません.cssなしでテストxpageで同じことを試みましたが、結果は同じでした.

デフォルトのスタイルシートの次のスタイルに疑問があります - 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を継承していろいろ試してみましたがうまくいきません。前もって感謝します。

4

1 に答える 1

1

簡単な解決策は次のとおりです。標準の XPage css を使用している場合は、IE7 でフィールドをスクロールしdisableTheme="true"ます<xp:inputText id="inputText1" disableTheme="true"></xp:inputText>が、すべての css プロパティが失われるため、自分でいくつかのスタイルを追加する必要があります。

あなたが使用できるように：

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

古い IE ブラウザのテーマを無効にするには...

于 2013-05-29T09:43:09.017 に答える