How do I left pad a div in a JavaFX WebView?

Question

I am working on getting consistent alignment in my application which is written in GWT and viewed via a JavaFX 2.2 WebView (Java 7u40) which is based on WebKit.

The problem that I have run into is that there appear to be issues/lack of support with CSS layout properties in JavaFX. The documentation (http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html) says that CSS 2.1 is supported (which includes padding, padding-left, etc).

The docs also make this statement "JavaFX CSS does not support CSS layout properties such as float, position, overflow, and width. However, the CSS padding and margins properties are supported on some JavaFX scene graph objects."

Here is what I have that works just fine in Chrome:

.foo-bar-values {
    padding-left:   22px;
}

But this has no effect at all in the WebView.

Here are additional rules that I tried which all work fine in Chrome but fail to do anything in the JavaFX WebView:

.foo-bar-values {
    padding:    0px 0px 0px 22px;
}    
.foo-bar-values {
    margin: 0px 0px 0px 22px;
}    
.foo-bar-values {
    margin-left:    22px;
}
.foo-bar-values {
    padding-left:   22px;
    -fx-label-padding:  0px 0px 0px 22px;
}    
.foo-bar-values {
    padding-left:   22px;
    -fx-padding:    0px 0px 0px 22px;
}
.foo-bar-values {
    padding-left:   22px;
    \-fx-label-padding: 0px 0px 0px 22px;
}    
.foo-bar-values {
    padding-left:   22px;
    \-fx-padding:   0px 0px 0px 22px;
}

The DOM is structured like the following:

<table>
  <colgroup></colgroup>
  <tbody>
    <tr>
      <td></td>
      <td>
        <div class="foo-bar-values">This doesn't pad.</div>
      </td>
    </tr>
  </tbody>
</table>

How do I get this <div> to align properly in a JavaFX WebView?

Answer 1

Apparently the document that I linked (the only I could find about CSS support in JavaFX) only applies to normal JavaFX development and not to the capabilities of the WebView itself (based on webkit).

It does appear that padding-left and other related layout properties work just fine in the JavaFX WebView. There was something stopping my WebView from loading up all of the CSS (unknown reason). Thus the last few values (which I needed) weren't available for styling the document.

I did some major cleaning and rebuilding of my project as well as wiping of all temp and cache files and this issue 'went away on its own'.

I can see the padding applied properly in the WebView now and I can see it applied in FireBug Lite:

padding-left    22px

I had verified that the rule was in my app.css in the .war file, so GWT was generating and bundling things properly. There appears to have been an issue somewhere on the JavaFX WebView side.