css - HTMLPanel centering with UIBinder and GWT -


the code below displays login box in upper left hand corner of browser, display in center.

i have read various topics on how center using css style elements , cell element, not working. maybe doing wrong.

i starting learn uibinder excuse bad style.

any appreciated, thank you.

here code:

<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> 

edit: added marconius css

the following code allow center top left corner of dialog box (watch out correntions did in ui binder css grammar):

<!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>  

if want center dialog box should make more considerations, in not straightforward. may want have t implementation of center() method in popuppanel class.


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -