Центрирование панели в GWT с использованием системы layoutpanel

Question

Центрирование панели в GWT с использованием системы layoutpanel

На сайте разработчиков GWT есть пример, показывающий панель, которая находится в середине страницы. Можно ли зафиксировать панель в середине страницы, используя макетные панели GWT?

http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html

3

layout gwt layoutpanels

Источник

user97901 19 апр '11 в 19:47

3 ответа

Другие вопросы по тегам layout gwt layoutpanels

user291741 20 апр '11 в 21:31 2011-04-20 21:31 · Answer 1 · 2011-04-20 21:31

Есть старый добрый CSS-трюк для центрирования абсолютных блоков фиксированного размера с использованием автоматической разметки CSS (JavaScript не требуется):

Сначала отцентрируйте верхний левый угол окна, используя top: 50%; left: 50%;
Конечно, коробка будет слишком далеко до дна / прямо сейчас.
Затем вычтите половину высоты / ширины окна, используя поля. (Это фиксированный размер, так что вы можете рассчитать "половину высоты / ширины" с ручкой и бумагой:-)

Пример:

<!doctype html>

<html>
<head>

<style type="text/css">
    .box {
        position: absolute;
        background-color: red;
        height: 300px;       width: 400px;  /* Using "px" here, but you */
                                            /* can also use "em" etc.   */
        top: 50%;            left: 50%;
        margin-top: -150px;  margin-left: -200px;
    }
</style>

</head>

<body>
    <div class="box">Box</div>
</body>
</html>

Примените этот стиль к вашей LayoutPanel - у меня нет полного примера кода для этого, но я думаю, что это должно быть возможно.

user439317 20 апр '11 в 03:58 2011-04-20 03:58 · Answer 2 · 2011-04-20 03:58

Я не думаю, что вы можете сделать сам слой фиксированной ширины центром автоматически в LayoutPanel. Однако вы можете вставить слой в DOM, чтобы получить его размер, а затем самостоятельно рассчитать правильные смещения. Вы можете увидеть, как Google делает это (не в LayoutPanel) в коде для DialogBox.center();

user607050 20 апр '11 в 02:26 2011-04-20 02:26 · Answer 3 · 2011-04-20 02:26

Вы можете добиться эффекта с помощью простого CSS. Например:

<html><head>
<style>
.outer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: blue;
}

.inner {
  position: absolute;
  top: 25%;
  right: 25%;
  bottom: 25%;
  left: 25%;
  background-color: red;
}
</style>
</head>
<body>
<div class="outer"><div class="inner" /></div>
</body></html>

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