Как повысить уровень rich: panelMenu с помощью rich: outputPanel с h: panelGrid? - PullRequest
1 голос
/ 09 марта 2010

Я был бы очень признателен за мнение эксперта о том, что делать с вышеуказанной проблемой. В целом это ломается так: Я реализовал динамически создаваемый 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 по левой стороне выходной панели (вертикально выровненная середина, что и происходит сейчас).

2: Я хотел бы исправить ширину panelMenu с помощью px, но если меню заканчивается слишком длинной записью, я заметил, что переполнение, по-видимому, исправлено при скрытом. Я не могу заставить overflow: auto работать. Мне просто нужен горизонт. полоса прокрутки в этой ситуации.

3: PanelGrid должен быть на 100% шириной вкладки, в которой он находится. Я слышал о h:panelGrid width:100%, вызывающем проблемы, поэтому, если это все еще имеет место, как я могу обойти это?

Надеюсь, это имеет смысл. Я уже некоторое время пользуюсь css, но принудительно заставить то, что я хочу, использовать радиочастотные компоненты, оказывается сложнее, чем я думал.

Большое спасибо

1 Ответ

0 голосов
/ 09 марта 2010

Точка 1: использование <h:panelGrid columns="2" border="0" style="width: 100%" columnClasses="cols, cols"> а затем укажите в вашем CSS класс cols. Задав его несколько раз, вы примените его к последующим столбцам. Это в документации , но не упоминается в их примере.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...