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

[CSS] ComboBox size issue with custom CSS

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Resolved
    • Priority: P3
    • Resolution: Fixed
    • Affects Version/s: 8u20
    • Fix Version/s: 8u40
    • Component/s: javafx
    • Labels:
    • Environment:

      Win7 64bit, Java 8u5 / Java 8u20

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

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              jgiles Jonathan Giles
              Reporter:
              wzberger Wolfgang Zitzelsberger
              Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Imported: