나는 위의 문제를 해결하기위한 전문가의 견해에 크게 감사하고 있습니다. 대략 다음과 같이 분해됩니다. 동적으로 생성 된 rich:panelMenu을 구현했으며 RichFaces 데모에 따라 a4j:outputPanel을 넣으면 사용자가 메뉴에서 항목을 클릭 할 때 나타나는 내용이 포함됩니다. 코드는 다음과 같습니다rich : panelMenu를 최상위에 올리는 방법 : h : panelGrid가있는 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 : panelMenu 너비를 px로 수정하고 싶지만 너무 긴 항목이 메뉴에 포함되면 오버플로가 숨겨진 상태로 고정되어있는 것으로 나타났습니다. overflow: auto을 사용할 수없는 것 같습니다. 난 그냥 horiz가 필요해. 이 상황에서 스크롤 막대.
3 : panelGrid는 포함 된 탭 너비의 100 % 여야합니다. h:panelGridwidth:100%에 대해 들었습니다. 그래도 문제가 발생하면 어떻게해야합니까?
나는 이것이 의미가 있기를 바랍니다. 나는 CSS를 한동안 사용해 왔지만, RF 컴포넌트에 내가 원하는 것보다 더 힘들다고 생각하고있다.
많은 감사