Details
Description
Execute the test below - when a combo is opened the popup width is larger than the combobox. When selecting an item from the popup the width of the combo control changes - the effect is more noticeable for the ReadOnly combo. Please also note that the right border color of the popup is a bit different (blurry) - not quite sure if related to the size issue.
Test class:
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.geometry.Insets;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class ComboBoxTest extends Application
{
public static void main(String[] args)
{
Application.launch(args);
}
@Override
public void start(Stage stage)
{
System.err.println(System.getProperty("javafx.runtime.version"));
Application.setUserAgentStylesheet(getClass().getResource("style.css").toExternalForm());
Parent content = createContent();
Scene scene = new Scene(content, 800, 600);
stage.setScene(scene);
stage.show();
}
public Parent createContent()
{
final FlowPane content = new FlowPane(10, 10);
content.setPadding(new Insets(60));
content.getChildren().add(createComboBox(false, false));
content.getChildren().add(createComboBox(true, false));
return content;
}
private ComboBox<String> createComboBox(boolean readonly, boolean disabled)
{
ComboBox<String> combo = new ComboBox<String>();
combo.setItems(FXCollections.<String>observableArrayList("Regular", "ReadOnly", "Disabled", "Disabled/ReadOnly"));
combo.setDisable(disabled);
combo.setEditable(!readonly);
if (readonly && disabled)
combo.setValue("Disabled/ReadOnly");
else if (readonly)
combo.setValue("ReadOnly");
else if (disabled)
combo.setValue("Disabled");
else
combo.setValue("Regular");
return combo;
}
}
Stylesheet (style.css):
.root {
-fx-font: 11 Tahoma;
-fx-text-fill: black;
}
.text {
-fx-text-fill: #F00;
-fx-font-smoothing-type: lcd;
}
.combo-box-base{
-fx-background-color: #0FF;
-fx-padding: 2 2;
}
.combo-box-base:editable{
-fx-background-color: #FF0;
}
.combo-box-base:editable > .text-field {
-fx-border-image-source: null;
-fx-background-color: transparent;
-fx-padding: 1 0;
}
.combo-box-base > .arrow-button {
-fx-background-color: red;
-fx-padding: 0 4;
}
.combo-box-base > .arrow-button > .arrow {
-fx-background-color: black;
-fx-background-insets: 0 0 0 0;
-fx-padding: 2 4;
-fx-shape: "M 0 0 H 7 L 3.5 4 z";
}
.combo-box-popup > .list-view {
-fx-border-style: solid;
-fx-border-width: 1;
-fx-border-color: black;
-fx-background-color: white;
-fx-background-insets: 0, 1;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
-fx-padding: 1 10;
-fx-background: red;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
-fx-background: green;
-fx-background-color: orange !important;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover,
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
-fx-background-color: silver !important;
}
.combo-box-popup > .list-view > .placeholder > .label {
-fx-text-fill: blue;
}
Test class:
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.geometry.Insets;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class ComboBoxTest extends Application
{
public static void main(String[] args)
{
Application.launch(args);
}
@Override
public void start(Stage stage)
{
System.err.println(System.getProperty("javafx.runtime.version"));
Application.setUserAgentStylesheet(getClass().getResource("style.css").toExternalForm());
Parent content = createContent();
Scene scene = new Scene(content, 800, 600);
stage.setScene(scene);
stage.show();
}
public Parent createContent()
{
final FlowPane content = new FlowPane(10, 10);
content.setPadding(new Insets(60));
content.getChildren().add(createComboBox(false, false));
content.getChildren().add(createComboBox(true, false));
return content;
}
private ComboBox<String> createComboBox(boolean readonly, boolean disabled)
{
ComboBox<String> combo = new ComboBox<String>();
combo.setItems(FXCollections.<String>observableArrayList("Regular", "ReadOnly", "Disabled", "Disabled/ReadOnly"));
combo.setDisable(disabled);
combo.setEditable(!readonly);
if (readonly && disabled)
combo.setValue("Disabled/ReadOnly");
else if (readonly)
combo.setValue("ReadOnly");
else if (disabled)
combo.setValue("Disabled");
else
combo.setValue("Regular");
return combo;
}
}
Stylesheet (style.css):
.root {
-fx-font: 11 Tahoma;
-fx-text-fill: black;
}
.text {
-fx-text-fill: #F00;
-fx-font-smoothing-type: lcd;
}
.combo-box-base{
-fx-background-color: #0FF;
-fx-padding: 2 2;
}
.combo-box-base:editable{
-fx-background-color: #FF0;
}
.combo-box-base:editable > .text-field {
-fx-border-image-source: null;
-fx-background-color: transparent;
-fx-padding: 1 0;
}
.combo-box-base > .arrow-button {
-fx-background-color: red;
-fx-padding: 0 4;
}
.combo-box-base > .arrow-button > .arrow {
-fx-background-color: black;
-fx-background-insets: 0 0 0 0;
-fx-padding: 2 4;
-fx-shape: "M 0 0 H 7 L 3.5 4 z";
}
.combo-box-popup > .list-view {
-fx-border-style: solid;
-fx-border-width: 1;
-fx-border-color: black;
-fx-background-color: white;
-fx-background-insets: 0, 1;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
-fx-padding: 1 10;
-fx-background: red;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
-fx-background: green;
-fx-background-color: orange !important;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover,
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
-fx-background-color: silver !important;
}
.combo-box-popup > .list-view > .placeholder > .label {
-fx-text-fill: blue;
}
Attachments
Issue Links
- relates to
-
JDK-8089593 ComboBox with custom CSS changes sizes unexpectedly
-
- Open
-