Центрирование панели в GWT с использованием системы layoutpanel - PullRequest
Новая
       34

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

3 голосов
/ 19 апреля 2011

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

Ответы [ 3 ]

3 голосов
/ 21 апреля 2011

Есть старый добрый 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 - у меня нет полного примера кода для этого, но я думаю, что это должно быть возможно.

0 голосов
/ 20 апреля 2011

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

0 голосов
/ 20 апреля 2011

Вы можете добиться эффекта простым 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.

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

Похожие темы

...