0

私はここでピクルスのディリーを食べています。struts2-jquery の tabbedpanel を使用しています。複数のタブがあり、それぞれが ajax 経由で html コンテンツを返します。

私の問題は、私が返している html がタブ付きパネルのタブのレイアウトを壊しているように見えることです。タブが終了し、html が返されたオーバーフローがタブの終了の外側と下に (視覚的に) 表示されます。

タブが行っている ajax 呼び出しを確認し、返された html が有効であることを確認しました。追加の開始要素または追加の終了要素がある場合、この種の動作が予想されるかもしれませんが、html は完璧に見えます。タブ付きパネルをロードする jsp ページの例を次に示します。
このプロジェクトは struts2 dojo プラグインを使用して動作していましたが、struts2-jquery プラグインのタブパネルのアニメーションなどがよりきれいであることがわかりました。struts-dojo tabbedpanel を使用してこのように html を返すと、問題なく動作します。これを引き起こす原因についてのアイデアはありますか?

      <sj:tabbedpanel id="remotetabs" selectedTab="1" show="true" hide="'fade'" collapsible="true" sortable="true" cache="true">

        <s:url var="remoteUrlFourDay" action="fourdayforecast.action">
            <s:param name="name"><s:property value="name"/></s:param>
            <s:param name="zipcode"><s:property value="zipcode"/></s:param>
        </s:url>
        <sj:tab id="fourday" href="%{remoteUrlFourDay}" label="4 Day Forecast" errorText=" "/>

        <s:url var="remoteUrl24Hour" action="hourlyforecast.action">
            <s:param name="name"><s:property value="name"/></s:param>
            <s:param name="zipcode"><s:property value="zipcode"/></s:param>
        </s:url>
        <sj:tab id="two" href="%{remoteUrl24Hour}" dataType="html" label="24 Hour Forecast" errorText=" "/>

        <s:url var="remoteUrlTenDay" action="tendayforecast.action">
            <s:param name="name"><s:property value="name"/></s:param>
            <s:param name="zipcode"><s:property value="zipcode"/></s:param>
        </s:url>
        <sj:tab id="tenday" href="%{remoteUrlTenDay}" label="Ten Day Forecast"   errorText=" "/>

        <s:url var="remoteUrlTest" action="webcams.action">
            <s:param name="name"><s:property value="name"/></s:param>
            <s:param name="zipcode"><s:property value="zipcode"/></s:param>
        </s:url>
        <sj:tab id="test" href="%{remoteUrlTest}" label="Test" errorText=" "/>
    </sj:tabbedpanel>

Alexandr の要求に従って、ここに html があります。コードブロックに入れてみましたが、フォーマットがおかしいので、返された html を Web サーバーでホストしました。 問題のページから完全に生成された Html ページ のソースを見て、html を確認してください。返された ajax の html で使用されている 2 つの CSS スタイルを次に示します。

.block {
width: 200px;
height: 160px;
margin: 5px 10px 10px 5px;
padding: 5px;
border: 5px solid #94BEFF;
float: left; }

#wrap {
background-color: white;
margin: 0 auto;
} 

私のプロジェクトのレイアウトの問題

4

0 に答える 0