Uploaded image for project: 'JDK'
  1. JDK
  2. JDK-8089593

ComboBox with custom CSS changes sizes unexpectedly

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: P4 P4
    • tbd
    • 8u40
    • javafx
    • None

      Follow up issue from RT-37612:

      Steps to reproduce:
      1) Selecting the last entry ("Disabled/ReadOnly") in either ComboBox
      2) BUG: The width of the combobox is changed
      3) Select the first entry
      4) The width varies again.

      Another issue is that the height of the popup seems to be incorrect - not all entries are always visible, the last entry is cropped sometimes.

      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;
      }

            Unassigned Unassigned
            jgiles Jonathan Giles
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Imported: