UIBinder 및 GWT를 중심으로 HTMLPanel

Question

아래 코드는 브라우저의 왼쪽 상단 모서리에 로그인 상자를 표시하지만 가운데에 표시하려고합니다.

CSS 스타일 요소와 셀 요소를 사용하여 센터링하는 방법에 대한 다양한 주제를 읽었지만 제대로 작동하지 않습니다. 어쩌면 내가 뭔가 잘못하고있는 것 같아.

저는 이제 UiBinder를 배우기 시작하면서 저의 나쁜 스타일을 변명합니다.

도움을 주시면 감사하겠습니다. 감사합니다.

<ui:style> 
     buttonsDiv{ 
     float: right; 
     margin-top: 20px; 
    } 
</ui:style> 
<g:DialogBox text="Instructor Registration"> 
    <g:HTMLPanel> 
     <g:HTMLPanel styleName='buttonsDiv'> 
      <g:Label>First Name</g:Label> 
      <g:TextBox></g:TextBox> 
     </g:HTMLPanel> 
     <g:HTMLPanel styleName='buttonsDiv'> 
      <g:Label>Last Name</g:Label> 
      <g:TextBox></g:TextBox> 
     </g:HTMLPanel> 
     <g:HTMLPanel styleName='buttonsDiv'> 
      <g:Label>Institution</g:Label> 
      <g:TextBox></g:TextBox> 
     </g:HTMLPanel> 
     <g:HTMLPanel styleName='buttonsDiv'> 
      <g:Label>Department</g:Label> 
      <g:TextBox></g:TextBox> 
     </g:HTMLPanel> 

     <g:HTMLPanel styleName='buttonsDiv'> 
      <g:Button ui:field="submit">Submit</g:Button> 
      <g:Button ui:field="goBack">Cancel</g:Button> 
     </g:HTMLPanel> 

    </g:HTMLPanel> 
</g:DialogBox> 

Answer 1

편집 : 여기

코드입니다 Marconius CSS

다음 코드를 추가하면 대화 상자의 왼쪽 상단 중앙 수 (내가 한 일부 correntions 조심) 당신의 UI 바인더 CSS의 문법 : 당신이 실제로 대화 상자 자체를 중심하려면

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 
    <ui:style> 
     .buttonsDiv { 
      margin-top: 20px; 
     } 

     .centerCss { 
      position: absolute; 
      left: 50%; 
      top: 50%; 
      width: 150px; 
      height: 300px; 
      margin-top: -150px; 
      margin-left: -75px; 
     } 
    </ui:style> 
    <g:VerticalPanel stylePrimaryName="{style.centerCss}"> 
     <g:DialogBox text="Instructor Registration"> 
      <g:HTMLPanel> 
       <g:HTMLPanel styleName="{style.buttonsDiv}"> 
        <g:Label>First Name</g:Label> 
        <g:TextBox></g:TextBox> 
       </g:HTMLPanel> 
       <g:HTMLPanel styleName="{style.buttonsDiv}"> 
        <g:Label>Last Name</g:Label> 
        <g:TextBox></g:TextBox> 
       </g:HTMLPanel> 
       <g:HTMLPanel styleName="{style.buttonsDiv}"> 
        <g:Label>Institution</g:Label> 
        <g:TextBox></g:TextBox> 
       </g:HTMLPanel> 
       <g:HTMLPanel styleName="{style.buttonsDiv}"> 
        <g:Label>Department</g:Label> 
        <g:TextBox></g:TextBox> 
       </g:HTMLPanel> 

       <g:HTMLPanel styleName="{style.buttonsDiv}"> 
        <g:Button ui:field="submit">Submit</g:Button> 
        <g:Button ui:field="goBack">Cancel</g:Button> 
       </g:HTMLPanel> 
      </g:HTMLPanel> 
     </g:DialogBox> 
    </g:VerticalPanel> 
</ui:UiBinder> 

당신은 좀 더 단점을해야 그것은 간단하지 않습니다. PopupPanel 클래스에서 center() 메서드 구현을 살펴볼 수 있습니다.