2 Replies Latest reply: Sep 6, 2013 8:40 AM by user8929955 RSS

    Styles of control not applied

    user8929955

      I have written a control which uses labels. These labels have assigned different style classes. However when running the application, the styles are not applied to the labels.

      I checked the following potential issues and all checked out negative:

      • Could not file style sheet
      • style class not defined on label
      • style class of Label does not match with style class in CSS

      Definition of the style sheet in the control:

      @Override
      protected String getUserAgentStylesheet() {
      URL cssURL = getClass().getResource("/ch/sahits/game/javafx/control/"+getClass().getSimpleName()+".css");
          return cssURL.toExternalForm();
      }
      

      Code fragment setting the styles on the labels

      final Label l = new Label(line.getLine());
      String styleClass = line.getStyleClass();
      l.getStyleClass().add(styleClass);
      

      Fragment from the style sheet

       .pagination-heading {
           -fx-font-style: italic;
           -fx-font-weight: bold;
       }
       .pagination-paragraph {
           -fx-font-style: normal;
           -fx-font-weight: normal;
       }
       .pagination-centered {
           -fx-font-style: normal;
           -fx-font-weight: normal;
       }
      

      Other parts of the style sheet work out fine as expected.

      So I have no further ideas, what else to check to figure this out.

        • 1. Re: Styles of control not applied
          David Grieve

          One way to see if the styles are being picked up at all is to put a border around the label with -fx-border-color:

           .pagination-heading {  
               -fx-font-style: italic;
            -fx-font-weight: bold;
            -fx-border-color: red;
          
           }  
           .pagination-paragraph {  
               -fx-font-style: normal;
            -fx-font-weight: normal;
            -fx-border-color: yellow;
          
           }  
           .pagination-centered {       
               -fx-font-style: normal;
              -fx-font-weight: normal;
            -fx-border-color: green;
          
           }  
          
          
          

           

           

          Is this 2.x code? This may be a problem with font inheritance in the CSS code which is fixed in 8.0. In 2.x, you might be able to work around the problem by using the font shorthand.

           

           .pagination-heading {  
               -fx-font: bold italic 1em inherit;  
           }  
           .pagination-paragraph {  
               -fx-font: 1em inherit;
           }  
           .pagination-centered {  
               -fx-font: 1em inherit;
           }  
          
          • 2. Re: Styles of control not applied
            user8929955

            Thanks that helped, as I am using 2.x. Though now my font sizes are out of whack. The font size is actually set by an additional CSS provided by the Application. The font size is defined with -fx-font-size on the class label.