0

How can I change the size and color of the text for the ControlsFX segmented bar? The usual way:

-fx-font-size: 15px

Doesn’t seem to work.

It doesn’t matter to me whether I change this using a CSS stylesheet or through the code. I have tried both. -fx-background-color: does work, so my styling is having an effect.

I just can’t seem to find anywhere, or intuitively figure out the correct CSS for how to style the text of the segmented bar control.

Thanks!

Miss Chanandler Bong
  • 4,081
  • 10
  • 26
  • 36
sillyPin
  • 35
  • 5
  • Please give us a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). It's easier to understand your problem with your code. – Enrico Dec 04 '21 at 19:56

1 Answers1

1

ControlsFX uses a default SegmentViewFactory that uses a class called SegmentView with a style class segment-view, so this is the way to style a text in a SegmentedBar:

.segment-view {
    -fx-font-size: 15px;
}

Another way to style the text in a SegmentedBar is to use a custom SegmentViewFactory. Here is an example:

SegmentedBar<Segment> bar = new SegmentedBar<>();
bar.getSegments().addAll(
        new Segment(2.46, "Apple"),
        new Segment(2.43, "Microsoft"),
        new Segment(1.94, "Alphabet"),
        new Segment(1.72, "Amazon"));
bar.setOrientation(Orientation.HORIZONTAL);
bar.setSegmentViewFactory(segment -> {
    Label viewNode = new Label(String.format("%s (%.2fT)", segment.getText(), segment.getValue()));
    viewNode.setStyle("-fx-font-size: 15px; -fx-font-style: italic;");
    return viewNode;
});
Miss Chanandler Bong
  • 4,081
  • 10
  • 26
  • 36
  • Thank you that's perfect! I was having a look at segment view factories but couldn't figure it out. The style class segment-view doesn't appear in the docs unless I missed it. Cheers! – sillyPin Dec 06 '21 at 14:05
  • I found it in the constructor of `SegmentedBar.SegmentView`. It is also mentioned on [this page](https://controlsfx.github.io/javadoc/11.1.0/org.controlsfx.controls/org/controlsfx/control/SegmentedBar.SegmentView.html) of the documentation. – Miss Chanandler Bong Dec 06 '21 at 14:29
  • Thanks! This may warrant a whole follow-up question, but do you know how I can get the layout bounds of the label/segment using a segment view factory? I can't seem to get the methods (getLayoutBounds() or getWidth() etc) to return anything other than zero. I'm trying this so I can fit the text size to the segment because, as it shows in the link you sent the layout method has been overridden to ensure that the label used for displaying the text of a segment will be made invisible when there is not enough space to show the entire text. – sillyPin Dec 06 '21 at 15:05
  • @strudelPie You're welcome. I think you should post this as a separate question. – Miss Chanandler Bong Dec 06 '21 at 15:11
  • I should add that doing it in the code worked fine, but '.segment-view' in the CSS did not. Because it is a Label, actually only '.Label' style class worked for me. Just for clarity. – sillyPin Dec 06 '21 at 19:53