Question

我非常感谢有关如何解决上述问题的专家意见。从广义上讲，它像这样崩溃：我已经实现了动态创建的rich:panelMenu，并根据RichFaces演示，在其右侧放置a4j:outputPanel以包含当用户点击菜单中的项目时将显示的内容。代码是：

            <h:form>
                <a4j:region id="logs">
                    <h:panelGrid columns="2" border="0" style="width: 100%; margin: auto;">
                        <rich:panel header="Menu">
                            <rich:panelMenu mode="ajax" style="width: 300px">

                                <!-- feed iteration -->
                                <c:forEach items="#{MyBacking.panelNodes}" var="map">
                                    <rich:panelMenuGroup label="#{map.key}"
                                        style="padding-left: 10px;">
                                        <c:forEach items="${map.value}" var="entry">
                                            <rich:panelMenuItem label="#{entry}"
                                                style="padding-left: 20px;"
                                                action="#{MyBacking.updateCurrent}">
                                                <f:param name="current" value="#{entry}" />
                                            </rich:panelMenuItem>
                                        </c:forEach>
                                    </rich:panelMenuGroup>
                                </c:forEach>
                            </rich:panelMenu>
                        </rich:panel>
                        <rich:panel header="Content">
                            <a4j:outputPanel ajaxRendered="true" layout="inline"
                                style="vertical-align: top">
                                <h:outputText value="#{MyBacking.current}" id="current" />
                            </a4j:outputPanel>
                        </rich:panel>
                    </h:panelGrid>
                </a4j:region>
            </h:form>

[注意a4j:outputPanel有css尝试将其垂直对齐到顶部，但包含rich:panel主要是我的焦点]

问题是：

1：我希望两个组件水平对齐，这样两者的顶部都是水平的。我使用h:panelGrid来尝试控制菜单和outputPanel，但即使它呈现一个表格，vertical-align似乎也无效。
我认为它可能最终应用于错误的地方，因此不起作用（例如包含的跨度 - 虽然理论上另一个元素中的元素应该由该属性控制开放）。

 <h:panelGrid columns="2" border="0"    style="width: 100%; margin: auto;">

也没用。我至少在正确的轨道上吗？由于右侧面板将包含文件的内容，因此它将比panelMenu长得多。我需要阻止panelMenu向下滑动outputPanel的左侧（垂直对齐的中间，这就是现在发生的事情）。

2：我想用px修复panelMenu宽度，但是如果菜单最后包含的条目太长，我注意到溢出似乎被修复为隐藏。我似乎无法让overflow: auto工作。我只需要一个水平。滚动条在这种情况下。

3：panelGrid必须是它所包含的标签宽度的100％。我听说h:panelGrid width:100%导致问题，所以如果仍然如此，我怎么能得到围绕它？

我希望这是有道理的。我现在已经使用了css一段时间了，但强迫我想要的RF组件比我想象的要复杂得多。

非常感谢

Answer 1

第1点：使用<h:panelGrid columns="2" border="0" style="width: 100%" columnClasses="cols, cols"> 然后在你的css中指定cols类。多次指定它会将其应用于连续列。它位于documentation，但未在其示例中引用。

如何使用它富有的topMenu：panelMenu：带有h：panelGrid的outputPanel？

1 个答案: