Question

我想要一个富脸面板组/面板网格的滚动条。在css中指定高度无助于原因。整个代码位于名为mysidebar的文件中，该文件包含在布局模板中。附上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <h:outputStylesheet>
        .cols {
        vertical-align: top;
        height: 100px;
        overflow: auto;
        }
    </h:outputStylesheet>
    <h:form id="form">
        <h:panelGrid columns="2" columnClasses="cols,cols" height="300" width="400">
            <rich:panelMenu style="width:200px" itemMode="ajax" groupMode="ajax" groupExpandedLeftIcon="triangleUp"
                groupCollapsedLeftIcon="triangleDown" topGroupExpandedRightIcon="chevronUp"
                topGroupCollapsedRightIcon="chevronDown" itemLeftIcon="disc" itemChangeListener="#{panelMenuBean.updateCurrent}">
                <rich:panelMenuGroup label="Group 1">
                    <rich:panelMenuItem label="Item 1.1" name="Item_1_1" />
                    <rich:panelMenuItem label="Item 1.2" name="Item_1_2" />
                    <rich:panelMenuItem label="Item 1.3" name="Item_1_3" />
                </rich:panelMenuGroup>
                <rich:panelMenuGroup label="Group 2">
                    <rich:panelMenuItem label="Item 2.1" name="Item_2_1" />
                    <rich:panelMenuItem label="Item 2.2" name="Item_2_2" />
                    <rich:panelMenuItem label="Item 2.3" name="Item_2_3" />
                    <rich:panelMenuGroup label="Group 2.4">
                        <rich:panelMenuItem label="Item 2.4.1" name="Item_2_4_1" />
                        <rich:panelMenuItem label="Item 2.4.2" name="Item_2_4_2" />
                        <rich:panelMenuItem label="Item 2.4.3" name="Item_2_4_3" />
                    </rich:panelMenuGroup>
                    <rich:panelMenuItem label="Item 2.5" name="Item_2_5" />
                </rich:panelMenuGroup>
                <rich:panelMenuGroup label="Group 3" style="cols">
                    <rich:panelMenuItem label="Item 3.1" name="Item_3_1" />
                    <rich:panelMenuItem label="Item 3.2" name="Item_3_2" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                    <rich:panelMenuItem label="Item 3.3" name="Item_3_3" />
                </rich:panelMenuGroup>
            </rich:panelMenu>
            <a4j:outputPanel ajaxRendered="true">
                <rich:panel rendered="#{not empty panelMenuBean.current}">
                    <h:outputText value="#{panelMenuBean.current} selected" id="current" />
                </rich:panel>
            </a4j:outputPanel>
        </h:panelGrid>
    </h:form>
</ui:composition>

Answer 1

div style="overflow: auto; height: 200px; width: 500px;"

这个对我有用。

由于在html代码中，panelgrid正在提供表格标记而panelgroup为span标记，因此无效使用这些标签

富面富：带滚动条的面板菜单

1 个答案: