Styling the text of segmented bars in ControlsFX using CSS

Is there a way to customize the size and color of the text for the ControlsFX segmented bar? I've attempted the typical method:

-fx-font-size: 15px

Unfortunately, it doesn't seem to be effective.

Whether it's through CSS or code, I'm open to changing the text style. I have experimented with both methods. While -fx-background-color: does work, I am struggling to apply styles to the text of the segmented bar control.

I'd appreciate any guidance on how to correctly style the text in the segmented bar control.

Thanks!

javacssjavafxcontrolsfx

Answer №1

When working with ControlsFX, there is a default SegmentViewFactory that utilizes a class named SegmentView and applies a style class segment-view. This is the recommended approach for styling text within a SegmentedBar:

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

An alternative method to customize the text in a SegmentedBar is by implementing a custom SegmentViewFactory. Here is an illustration:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The alignment of the third column div is off and not displaying properly

I am having some trouble with aligning the divs on my page in a column layout. Despite setting the first two divs to float left, the third one does not align properly. I want the third div to be floated right and aligned with the first two. You can see an ...

csshtml

Display an HTML checkbox with intricate design features

I have a simple question - how can I print a green checkbox with a white check mark (Ctrl + P) without it turning black and white? This solution currently works with Bootstrap 4.0.0, but needs to be compatible with bootstrap 3.3.7. I've managed to cr ...

htmlcss

What is the recommended algorithm to use in ScramSha1Authenticator based on Veracode's guidelines?

After testing with Veracode, we discovered that in the Mongo DB java driver 3.4.1 jar: The file ScramSha1Authenticator.java at line number 215 is employing a flawed or unsafe cryptographic algorithm. Do you have any solutions or workarounds for this is ...

javamongodbshaveracode

What is the process for closing the lightbox?

My code is supposed to display a lightbox as soon as the page loads, similar to a popup window. However, there seems to be an issue with closing the lightbox when clicking on the 'x' button at the corner of the box. Unfortunately, the current cod ...

javascripthtmlcsslightbox

The rectangular shape extending beyond the boundaries of the canvas

I'm currently working on creating a rectangle within a canvas element. I've set the width of the div to match the width of the rectangle, but unfortunately, the rectangle is extending beyond the left side of the canvas container. My goal is to co ...

javascripthtmlcssreactjscanvas

What could be hindering the animation of this button?

I found this snippet on a coding blog, where the design looked perfect: However, when I tried implementing it, the button displayed a static gradient instead of animated. Additionally, aligning the text in the center vertically seems to be trickier than e ...

htmlcsscss-animations

Button with opaque background over a see-through backdrop

I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this? <div class="col-md-12 landing-container"> <img src="images/pig.jpg" class="main-imag ...

htmlcss

Is there a different solution available to address this issue?

Having an issue with the code. Click number 2 is not working for me, even though number 1 works perfectly fine! Any insights on why this might be happening? @Test public void maintenance() { String file = "R:\\hellthinky\\ ...

javaseleniumfilewebdriverbufferedreader

Resizing images using a dynamic frame size

I am in need of some assistance as I am currently facing a roadblock. My goal is to develop a picture framing tool for photos where users can specify the size of their photo, choose a colored cardboard mount, and select a frame type. My client has requeste ...

phpjquerycssajax

What is the best way to incorporate background colors into menu items?

<div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12 fl logo"> <a href="#"><img src="images/main-logo.png" alt="logo" /> </a> ...

javascriptphpjqueryhtmlcss

Ways to replace CSS classes created using makeStyles

To clarify, my development environment is using MUI version 4.12.3. Inside file A, I have a simplified code snippet for a functional component, along with the usage of makeStyles to style a JSX element within the return statement (not displayed here). Ever ...

javascriptcssreactjsmaterial-uimakestyles

Is it possible to dynamically assign trigger and target divs to bPopup?

On our ColdFusion page, we have a dynamic list of paired divs created using a loop over a query. For example, each pair consists of internshipHandleX and internshipHiddenX: <div id="internshipHidden#internship.currentrow#" class="hidden pop-up"> We ...

javascriptjquerycsscoldfusionbpopup

Angular package that includes horizontal scrolling functionality with arrow buttons

Currently seeking an Angular 2-6 package featuring a horizontal image scroll with arrows, similar to the functionality on Airbnb: https://i.sstatic.net/BOWzD.jpg Any suggestions or recommendations are greatly appreciated – thank you! ...

cssangularnpm

Fixed headers remain in place as you scroll horizontally on a single table

Within my system, I have organized two tables: table one and table 2 are stacked on top of each other. I've managed to freeze the column headers so that they are displayed vertically, remaining static as users scroll horizontally. To achieve this effe ...

htmlcssangular

When deciding between utilizing a Javascript animation library and generating dynamically injected <style> tags in the header, consider the pros and cons of each

We are currently in the process of developing a sophisticated single-page application that allows users to create animations on various widgets. For example, a widget button can be animated from left to right with changes in opacity over a set duration. Ad ...

javascriptjquerycsscss-transitionsvelocity

Compact looped slideshow

Currently in the process of designing a website and looking to incorporate a unique photo gallery feature. The concept is as follows: The photo gallery will be displayed in a rectangular/box shape. There are a total of 10 photos, with only 7 initially vis ...

javascriptcss

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

I am currently working on a one-page website and I would like to include a map as a background behind the "contact" section. The map can be set to float, draggable, or positioned at the back. I have experience using both the Google Maps API and LeafletJS, ...

javascripthtmlcssgoogle-mapsleaflet

Material-UI is having trouble resolving the module '@material-ui/core/styles/createMuiTheme'

Although I have searched for similar issues on StackOverflow, none of the solutions seem to work for me. The errors I am encountering are unique and so are the fixes required, hence I decided to create a new post. The company conducting my test provided m ...

javascripthtmlcssreactjsmaterial-ui

Tips for setting up a grid where boxes have a consistent width but varying heights to maximize space utilization

Seeking design inspiration from Pinterest, where fixed width columns are used but each grid item fills all available space with varying heights. Check out this example: https://i.sstatic.net/i2WDo.jpg Initially considered using flexbox for this layout, b ...

gui-designhtmlcss

Guide to setting a dynamic print style without affecting the screen media

In my report, there is a details section below. The screen provides instructions to view the details with a button that toggles the list's visibility. When printing the report, I only want the instructions to show if the list is visible. If the list ...

javascriptjquerycss