XPages - 带有窗格 Autohieght 的 Dojo Accordion 容器答案

【问题标题】：XPages - Dojo Accordion Container with Panes AutohieghtXPages - 带有窗格 Autohieght 的 Dojo Accordion 容器
【发布时间】：2016-01-28 12:43:46
【问题描述】：

我有带窗格的 Dojo 手风琴。无论我做什么，我都无法解决我的问题。 Accordion Pane 的高度始终与 Accordion Pane 的最大高度相同。

我只是希望它根据它的内容足够高。我的意思是自动高。

【问题讨论】：

标签： xpages accordion

【解决方案1】：

将此 CSS 添加到您的 XPage 或主题中：

.dijitSelected .dijitAccordionContainer-child {
    height: auto !important;
}

Dojo 手风琴的窗格随即以正确的高度打开。

也可以使用主题“Bootstrap3.2.0”，因为手风琴可以按预期使用该主题开箱即用。

【讨论】：

【解决方案2】：

我已经进行了一些调查，我认为可以通过在每个 xe:basicContainerNode 上设置 CSS 高度属性 height:auto !important; 来解决问题，但是如果您打开/关闭手风琴窗格，那么高度属性将被覆盖 :(

XPage 来源：

<xe:accordion id="accordion1">
    <xe:this.treeNodes>
        <xe:basicContainerNode label="Container one">
            <xe:this.children>
                <xe:basicLeafNode submitValue="Container one, choice one" label="Choice one"></xe:basicLeafNode>
                <xe:basicLeafNode submitValue="Container one, choice two" label="Choice two"></xe:basicLeafNode>
                <xe:basicLeafNode submitValue="Container one, choice three" label="Choice three"></xe:basicLeafNode>
            </xe:this.children>
        </xe:basicContainerNode>
        <xe:basicContainerNode label="Container two" style="height:auto !important;">
            <xe:this.children>
                <xe:basicLeafNode submitValue="Container two, choice one" label="Choice one"></xe:basicLeafNode>
                <xe:basicLeafNode submitValue="Container two, choice two" label="Choice two"></xe:basicLeafNode>
                <xe:basicLeafNode submitValue="Container two, choice three" label="Choice three"></xe:basicLeafNode>
                <xe:basicLeafNode submitValue="Container two, choice one" label="Choice one"></xe:basicLeafNode>
                <xe:basicLeafNode submitValue="Container two, choice two" label="Choice two"></xe:basicLeafNode>
                <xe:basicLeafNode submitValue="Container two, choice three" label="Choice three"></xe:basicLeafNode>
                <xe:basicLeafNode submitValue="Container two, choice one" label="Choice one"></xe:basicLeafNode>
                <xe:basicLeafNode submitValue="Container two, choice two" label="Choice two"></xe:basicLeafNode>
                <xe:basicLeafNode submitValue="Container two, choice three" label="Choice three"></xe:basicLeafNode>
            </xe:this.children>
        </xe:basicContainerNode>
        <xe:basicContainerNode label="Container three">
            <xe:this.children>
                <xe:basicLeafNode submitValue="Container three, choice one" label="Choice one"></xe:basicLeafNode>
                <xe:basicLeafNode submitValue="Container three, choice two" label="Choice two"></xe:basicLeafNode>
                <xe:basicLeafNode submitValue="Container three, choice three" label="Choice three">
                </xe:basicLeafNode>
            </xe:this.children>
        </xe:basicContainerNode>
    </xe:this.treeNodes>
</xe:accordion>

Firebug 截图：

XPage 加载后：

窗格打开/关闭后：

【讨论】：