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
Post a Comment