(どのように) サラウンド div コンテナーのサイズに応じて、primefaces ガレリアのサイズを動的に変更することは可能ですか? ガレリアは常に周囲の div コンテナ全体を埋める必要があります。
jscript/jquery は正しいアプローチでしょうか?
(どのように) サラウンド div コンテナーのサイズに応じて、primefaces ガレリアのサイズを動的に変更することは可能ですか? ガレリアは常に周囲の div コンテナ全体を埋める必要があります。
jscript/jquery は正しいアプローチでしょうか?
.ui-galleria
width アトリビュートを 100% にしてみてください。css クラスが相対であることを確認してください。
私は似たようなことを試みていますが、私も問題に遭遇しました。
次のような p:galleria 要素を使用しています。
<h:form id="galleriaForm" style="border: 2px solid blueviolet; min-height: 800px">
<p:panelGrid columns="1" layout="grid" style="border: 2px solid aqua; min-height: 100%">
<p:row style="display: inline-block; min-height: 800px;border: 2px solid green; min-width: 100%">
<p:column style="display: inline-block; min-height: 100%; min-width: 100%;border: 2px solid red">
<p:outputLabel value="Überschrift" style="display: block;"/>
<p:galleria value="#{ImageManager.layoutBauenBilderlsite}"
id="galleriaID"
var="image"
showCaption="false"
transitionInterval="9000"
effectSpeed="1500"
style="display: inline-block; min-width: 100%"
effect="drop"
panelHeight="">
<p:graphicImage url="resources/images/#{image}"
style="height: 1040px; border:1px dotted lightgray; margin-left: 30%"/>
</p:galleria>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
panelHeight 属性を変更するには、h:body で onload を使用して js 関数を呼び出します。
function setGalleriaHeight(){
var h = window.innerHeight;
document.getElementById("galleriaForm:galleriaID").setAttribute("panelHeight", String(h));
}
ブラウザで確認できるように、panelHeight 属性は正しく設定されていますが、Element は変更されません。
属性が正しいことを確認するために、ソース コードに追加したところ、正常に機能しました。
また、サイズを style="height: h" に設定しようとしましたが、読み込まれた画像 "p:graphicImage のみがサイズ変更されません。
変わらない理由を知っている人がいるかもしれません。