删除 JavaFX TitledPane 中的插图，CSS 不起作用答案

【问题标题】：Remove insets in JavaFX TitledPane with CSS not working删除 JavaFX TitledPane 中的插图，CSS 不起作用
【发布时间】：2015-06-18 21:43:25
【问题描述】：

基于我尝试过的 James_D (How to set/remove insets in JavaFX TitledPane) 的解决方案，似乎通过 CSS 从 JavaFX TitledPane 中删除插图不起作用？它确实在 Scene Builder 中正确更新，但在运行时插图保持不变。甚至 Scenic View 8.0 也报告了 9.6 的填充。

FXML 示例：

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" stylesheets="@newCascadeStyleSheet.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="test3.FXMLDocumentController">
    <children>
      <Accordion layoutX="14.0" layoutY="14.0" prefHeight="270.0" prefWidth="320.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <panes>
          <TitledPane animated="false" text="untitled 1">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                     <children>
                          <Button fx:id="button" layoutX="9.600000381469727" layoutY="9.600000381469727" prefHeight="124.0" prefWidth="318.0" text="Click Me!" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                     </children>
                  </AnchorPane>
            </content>
              </TitledPane>
              <TitledPane animated="false" text="untitled 2">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </TitledPane>
          <TitledPane animated="false" text="untitled 3">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </TitledPane>
        </panes>
      </Accordion>
    </children>
</AnchorPane>

CSS：

.titled-pane {
    -fx-text-fill: rgb(0,100,157);
}
.titled-pane:focused {
    -fx-color: -fx-base;
    -fx-text-fill: white;
}
.titled-pane > .title {
    -fx-text-fill: rgb(0,100,157);
    -fx-font-weight: bold;
}
titled-pane > .title  > .label{
    -fx-text-fill: rgb(0,100,157);
    -fx-font-weight: bold;
}
.titled-pane:focused > .title {
    -fx-color: rgb(0,100,157); 
    -fx-text-fill: white;
}
.titled-pane > .title:hover {
    -fx-color: lightgrey;
}
.titled-pane > * > * > AnchorPane {
    -fx-padding: 0px ;
}

在场景生成器中查看：（预览）

运行时查看：

所以似乎由于某种原因没有应用填充。在我的主应用程序中，我使用了很多 Accordion 容器。另一种选择是将 FXML 代码中的填充添加到 TitledPane 的 AnchorPane，这可行，但这是一项耗时的工作。我在 CSS 中遗漏了什么吗？

【问题讨论】：

你需要.titled-pane > * > * > #AnchorPane 作为选择器，我想。不知道为什么它似乎在 SceneBuilder 中工作。您确定 css 是在运行时加载的吗？
嗨 James_D，我试过了，但结果相同。
我用更多的 CSS 元素更新了这个例子。如您所见，CSS 加载良好。
你可以试试 .titled-pane .content 并将填充设置为 0 吗？
不错的建议，刚刚尝试过，但结果相同。

标签： javafx javafx-8

【解决方案1】：

在以下样式类上将 -fx-padding 设置为 0。

.titled-pane .content AnchorPane {
    -fx-padding: 0px;
}

【讨论】：

【解决方案2】：

扩展@NDY 的答案：

如果你不使用AnchorPane作为TitledPane的内容，而是使用其他一些节点，你必须相应地调整CSS。

用于删除TitledPane 内容上的填充的通用 CSS 解决方案（无论使用哪种类型的 Node 作为内容）如下：

.titled-pane > .content > * {
    -fx-padding: 0px;
}

这会将TitledPane 内容的任何子项的填充设置为0px。

【讨论】：