Question

（如何）是否可以根据环绕的div容器的大小动态调整primefaces galleria的大小？广场应该总是填满整个周围的div容器。

jscript / jquery会采用正确的方法吗？

http://www.primefaces.org/showcase-labs/ui/galleria.jsf

Answer 1

尝试将.ui-galleria width属性设置为100％。确保css类是相对的。

Answer 2

为了使图库和图像内部都填充容器，请添加css：

 .ui-panel-images {
    width: 100%;
    height: 100%;
}

.ui-galleria-panel {
    width: 100%;
    height: 100%;
}

另外，将以下内容添加到p-galleria元素： panelWidth="auto"

Answer 3

我正在尝试类似的东西，但我也遇到了问题。

我正在使用 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 属性设置正确，正如我在浏览器中看到的那样，但元素没有改变。

为了确保该属性正确无误，我将其添加到我的源代码中，并且效果很好。

我也尝试将大小设置为 style="height: h" 但只有加载的图像 "p:graphicImage 不调整大小。

也许有人知道为什么它没有改变。

如何根据周围的div容器动态调整primefaces galleria的大小

3 个答案: