layoutpanel 시스템을 사용하여 GWT에서 패널 중심 맞추기

GWT 개발자 사이트에는 페이지 중간에 패널을 보여주는 예가 있습니다. GWT 레이아웃 패널을 사용하여 페이지 중간에서 패널로 고정시킬 수 있습니까?layoutpanel 시스템을 사용하여 GWT에서 패널 중심 맞추기

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

출처

2011-04-19 benstpierre

당신은 간단한 CSS로 효과를 얻을 수 있습니다. 예를 들어 기본 효과는 절대 위치 개체를 사용하여 일반 CSS에서 생성되면 그들은 본질적으로 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>

, 당신은 LayoutPanels으로 다시 작성 할 수 있습니다.

출처

2011-04-20 02:26:38 BobV

이렇게하면 고정 너비 안쪽 div가 생성되지 않습니다 ~ –

* 고정 비율 * 상자에 대한 좋은 해결책입니다. * 고정 크기 *에 대한 해결책은 약간 다르지만 간단한 CSS로는 여전히 가능합니다! –

LayoutPanel에서 자동으로 고정 너비 레이어 중심을 만들 수 있다고 생각하지 않습니다. 그러나 레이어를 DOM에 삽입하여 크기를 얻은 다음 직접 적절한 오프셋을 계산할 수 있습니다. DialogBox.center() 코드에서 Google이 레이아웃 패널 (layoutPanel이 아닌)에서 수행하는 방법을 볼 수 있습니다.

출처

2011-04-20 03:58:32

(더 자바 스크립트가 필요 없음) 자동 CSS를하고 설계를 사용하여, 고정 된 크기의, 절대 상자를 중심위한 좋은 오래된 CSS 트릭이있다 :

먼저 센터 이용하여 상자의 왼쪽 상단 모서리 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에이 스타일을 적용 - 내가 돈 '당신이 펜과 종이와

:-) 예 "높이/폭의 절반"을 계산할 수 있도록 (그것은 고정 된 크기는이다 그 전체 코드 예제가 있지만 가능한 것이어야한다고 생각합니다.

출처

2011-04-20 21:31:34

LayoutPanel은 NeedsResize 인터페이스를 구현하는 하위 패널에 onResize() 이벤트를 제공합니다. 다양한 패널 크기가 변경 될 수있는 경우이 후크를 사용할 수 있습니다. – BobV

layoutpanel 시스템을 사용하여 GWT에서 패널 중심 맞추기

답변

관련 문제