如何在JavaFX WebView中左键填充div?

时间:2013-11-06 15:32:14

标签: css gwt webview javafx-2 javafx-webengine

我正在努力在我的应用程序中获得一致的对齐,这是用GWT编写的,并通过基于WebKit的JavaFX 2.2 WebView(Java 7u40)进行查看。

我遇到的问题是JavaFX中的CSS布局属性似乎存在问题/缺乏支持。文档(http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html)表示支持CSS 2.1(包括填充,填充左侧等)。

文档也使这句话“ JavaFX CSS不支持CSS布局属性,例如float,position,overflow和width。但是,某些JavaFX场景图形对象支持CSS填充和边距属性。< / EM>“

以下是我在Chrome中运行良好的功能:

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

但这在WebView中根本没有任何影响。

以下是我尝试的其他规则,这些规则在Chrome中都运行良好,但在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;
}

DOM的结构如下:

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

如何让这个<div>在JavaFX WebView中正确对齐?

1 个答案:

答案 0 :(得分:1)

显然我链接的文档(我在JavaFX中唯一能找到的CSS支持)只适用于普通的JavaFX开发,而不适用于WebView本身的功能(基于webkit)。

看来padding-left和其他相关的布局属性在JavaFX WebView中运行得很好。有一些东西阻止我的WebView加载所有的CSS(未知原因)。因此,最后几个值(我需要的)不能用于样式化文档。

我做了一些重要的清理和重建我的项目以及擦除所有临时文件和缓存文件,这个问题“自行消失”。

我现在可以看到在WebView中正确应用了填充,我可以看到它在FireBug Lite中应用:

padding-left    22px

我已经验证该规则是在.war文件中的app.css中,因此GWT正在生成并正确捆绑事物。 JavaFX WebView方面似乎存在某个问题。