Центриране на панел в GWT с помощта на системата layoutpanel

На сайта за разработчици на GWT има пример, показващ панел, който е в средата на страница. Възможно ли е да има фиксиран панел в средата на страницата с помощта на панелите за оформление на GWT?

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


layout gwt layoutpanels
person benstpierre    schedule 19.04.2011    source източник

Отговори (3)


arrow_upward
3
arrow_downward

Има един добър стар 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 - нямам пълен примерен код за това, но мисля, че трябва да е възможно.

person Chris Lercher    schedule 20.04.2011
comment
LayoutPanel предоставя събитие onResize() за дъщерни панели, които имплементират интерфейса NeedsResize. Можете да използвате тази кука, ако различните размери на панела подлежат на промяна. - person BobV; 21.04.2011

arrow_upward
0
arrow_downward

Можете да постигнете ефекта с обикновен 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 система за ограничения.

person BobV    schedule 20.04.2011
comment
Това не създава вътрешен div~ с фиксирана ширина - person Riley Lark; 20.04.2011
comment
Все пак добро решение за кутии с фиксиран процент. Решението за фиксиран размер е малко по-различно, но все пак е възможно с прост css! - person Chris Lercher; 21.04.2011

arrow_upward
0
arrow_downward

Не мисля, че можете да накарате слой с фиксирана ширина да се центрира автоматично в LayoutPanel. Можете обаче да вмъкнете слоя в DOM, за да получите неговия размер, и след това сами да изчислите правилните отмествания. Можете да видите как Google прави това (не в LayoutPanel) в кода за DialogBox.center();

person Riley Lark    schedule 20.04.2011