GWT: как инвертировать вертикальную панель кнопок

У меня есть вертикальная панель, содержащая набор кнопок. При нажатии на кнопку базы панель расширяется и показывает набор кнопок, входящих в состав вертикальной панели. Поскольку эта базовая кнопка находится в нижней части пользовательского интерфейса, я внес изменения в CSS, чтобы расширенные кнопки отображались вверх, а не вниз. Тем не менее создается впечатление, что в развернутом состоянии страница расширяется вниз, а это приводит к добавлению скролла на страницу, что совершенно нежелательно.

Есть ли способ добавить кнопки на вертикальную панель, которая строится (переворачивается), а не строится вниз? Я действительно предпочел бы не добавлять кнопки в другом порядке, а затем снова играть с CSS, если это вообще возможно. Спасибо за ваши советы.


user-interface gwt
person ashish d    schedule 01.10.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

VerticalPanel — неправильный виджет для вашего макета. Вы должны использовать PopupPanel и очень простой CSS. Когда пользователь нажимает кнопку, вы показываете эту панель PopupPanel, вызывая метод .showRelativeTo(). Он сделает все расчеты за вас и покажет их вниз или вверх в зависимости от размера окна браузера и положения вашей кнопки.

В PopupPanel вы добавляете FlowPanel и добавляете свои кнопки в эту FlowPanel. Примените этот стиль к FlowPanel:

.menu {
    width: 100px;
}
.menu input {
    float: left;
    margin-top: 10px;
    width: 100px;
}
person Andrei Volgin    schedule 01.10.2012
comment
Благодарю за ваш ответ. Мне интересно, есть ли способ заставить всплывающую панель всегда открываться вверх? - person ashish d; 02.10.2012
comment
Да. Вместо использования showRelativeTo() вы можете просто установить координаты самостоятельно. Используйте метод .setPopupPositionAndShow(). - person Andrei Volgin; 02.10.2012

arrow_upward
0
arrow_downward

Это непросто just invert the direction, поскольку, насколько я понимаю, вы хотите, чтобы панель кнопок располагалась поверх существующей страницы. Веб-страницы следуют структуре потока и не складываются, если вы не укажете.

Возможно, вам придется изменить весь макет на абсолютную панель или использовать CSS (как вы сказали, что не хотите, но это определенно проще, чем предыдущий), чтобы вы могли разместить панель где угодно.

CSS:

.button-panel{
    clip: rect(auto, auto, auto, auto);
    position: absolute;
    left: 100px;
    top: 319px;
    overflow: visible;
}

Джава:

YourVerticalPanel.addStyleName("button-panel");
person texasbruce    schedule 01.10.2012