How to top-level a rich:panelMenu with it's rich:outputPanel with an h:panelGrid?

Question

Hello

I'd be greatly appreciative of some expert opinion on what to do with the above problem. Broadly it breaks down like this: I've implemented a dynamically created rich:panelMenu and as per the RichFaces demo, put an a4j:outputPanel to it's right to contain the content which will appear when the user clicks an item in the menu. Code is:

            <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>

[note the a4j:outputPanel has css to try and vertically align it to top but the containing rich:panel has been my focus mainly]

Questions are:

1: I'd like the two components to be aligned horizontally so the tops of both are level. I used an h:panelGrid to try and control the menu and outputPanel but even though it renders a table, vertical-align doesn't appear to work.
I think it might be being applied in the end to the wrong place and as such wouldn't work (such as a contained span - although in theory an element inside another element should be open to control by this property).

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

didn't work either. Am I on the right track at least? As the right hand panel will contain the contents of a file, it will be much longer than the panelMenu. I need to prevent the panelMenu sliding down the left side of the outputPanel (vertically aligned middle which is what is happening now).

2: I'd like to fix the panelMenu width with px , but if the menu ends up containing an entry which is too long, I've noticed the overflow appears to be fixed at hidden. I can't seem to get overflow: auto to work. I just need a horiz. scroll bar in this situation.

3: The panelGrid has to be 100% the width of the tab it's contained in. I've heard of the h:panelGrid width:100% causing problems so if this is still the case how can I get round it?

I hope this makes sense. I've used css for a while now, but forcing what I want into RF components is proving more tricky than I thought.

Many thanks

Answer 1

Point 1: Use <h:panelGrid columns="2" border="0" style="width: 100%" columnClasses="cols, cols"> and then specify in your css the cols class. Specifying it multiple times will apply it to successive columns. It's in the documentation, but not referenced in their example.