Question

I set a margin for a panel in css. Now I need to get the margin width in GWT. How could I do this?
For example, I set a css style for the panel

   <ui:binder>
  .panel{
   margin: 5px;
   }


  <g:HTMLPanel Ui:field=myPanel styleName="{style.panel}" />   
  </ui:binder>

In GWT 2.4, how can I retrieve the margin value (5px) in GWT class.
I have tired these, DOM.getIntStyleAttribute(myPanel.getElement(), “margin”),
DOM.getIntStyleAttribute(myPanel.getElement(), “marginWidth”), and myPanel.getElement().getStyle().getMargin(). all of these return 0.

How can I get the margin width then?

Thanks for replying.

Regards

Answer 1

You’re looking for the computed style, but are requesting the element style.

If you were to set the style attribute on an element directly, then you could query the element’s margin like you tried.

<!-- style can only be set on html elements, not widgets -->
<div ui:field="divElement" style='margin:5px'></div> 

divElement.getStyle().getMargin();

From what I could find, GWT does not provide a method for looking up the computed style. You will instead need to rely on an external library. A quick google search for gwt computed style will provide you with a few options.

---

Alternatively, you could define the margin width as a GWT CSS constant and use a CssResource to access it.

MyPanel.ui.xml

<ui:style field="style" type="com.myproject.client.MyPanel.MyStyle">
  @def marginWidth 5px;
  .panel{ margin: marginWidth; }
</ui:style>

MyPanel.java

@UiField MyStyle style;

interface MyStyle extends CssResource {
  String marginWidth();
}