Adding space between two Labels with dots in a GridPane layout using JavaFX

Initial Setup:

  • Using a GridPane with 2 Columns
  • Each Column containing a Label

https://i.sstatic.net/EkKnl.png


Desired Outcome:

  • Filling the space between the labels with dots

https://i.sstatic.net/jC7bw.png

I've only found String solutions that require knowing the target length of the combined string. However, this does not work for me as I need a solution that can adapt to changes in screen size, resulting in dynamically changing spaces between labels. Can anyone provide guidance on how to achieve this?

Answer №1

To create a visually appealing layout with two labels and a region in between, consider placing the labels in an HBox. Adjust the hgrow property for the labels and region to control their resizing behavior. You can enhance the design by using a linear gradient as the background for the region, creating a striking visual effect.

Illustrative Example

// Define a 20px wide horizontal gradient alternating between black and transparent colors
private static final Paint FILL = new LinearGradient(
        0, 0,
        10, 0,
        false,
        CycleMethod.REPEAT,
        new Stop(0, Color.BLACK),
        new Stop(0.5, Color.BLACK),
        new Stop(0.5, Color.TRANSPARENT)
);

// Create a background style for regions
private static final Background BACKGROUND = new Background(new BackgroundFill(FILL, CornerRadii.EMPTY, Insets.EMPTY));

private static void addRow(Pane parent, String label1Text, String label2Text) {
    // Instantiate labels
    Label label1 = new Label(label1Text);
    Label label2 = new Label('[' + label2Text + ']');
    
    // Create filler region with "stroke width" of 2
    Region filler = new Region();
    filler.setPrefHeight(2);
    filler.setBackground(BACKGROUND);
    
    HBox hbox = new HBox(5, label1, filler, label2);
    hbox.setAlignment(Pos.CENTER);
    HBox.setHgrow(label1, Priority.NEVER);
    HBox.setHgrow(label2, Priority.NEVER);
    HBox.setHgrow(filler, Priority.ALWAYS);
    hbox.setFillHeight(false);
    
    parent.getChildren().add(hbox);
}

@Override
public void start(Stage primaryStage) {
    VBox root = new VBox();
    addRow(root, "JBoss", "DOWN");
    addRow(root, "GlassFish", "UP");
    addRow(root, "verylongprocessname", "UP");

    Scene scene = new Scene(root);

    primaryStage.setScene(scene);
    primaryStage.show();
}

An alternative approach could involve applying a border (top only) to the region instead of setting a background. Omitting the prefHeight allows for noticeable dots rather than strokes. However, based on the provided context, the background method is recommended for maintaining consistency with the desired visual appearance.

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 applied style of NextUI Components may be inconsistent, appearing to not apply in certain instances even though it does work

I've hit a roadblock trying to solve this issue. While using NextUI, I've managed to successfully apply styles to some components like the navbar, indicating that I have correctly installed NextUI and configured Tailwind. However, I'm facing ...

I have a dynamic form code that allows users to insert data by adding multiple inputs in a row. However, I would like to modify it so that the inputs are added in a column instead

I found this code online that allows users to add extra inputs, but it currently only creates new rows in the database. I would like these inputs to be inserted into different columns within the same row. How can I modify it to achieve this? I have alread ...

Responsive columns with maximum width in Bootstrap

Currently, I'm working on coding a portion of a single-page responsive Bootstrap layout that features two columns of text placed side by side. The request from the designer is for these columns to have a maximum width, but to be centered until they hi ...

Concealing and revealing elements through css styling

In my journey to learn HTML, CSS, and PHP, I took some online courses to gain knowledge. Now, I am venturing into creating a site using Wordpress to further enhance my skills through practical experience. Recently, I created a page with a custom video fie ...

How can I prevent the expansion of elements in a drop-down menu when using display:

I've been struggling to implement a drop-down feature in my menu. The issue is that when I use display: flex, hovering over the drop-down also expands all other boxes without drop-downs. Any ideas on how to fix this easily? Additionally, is there a w ...

Video with dynamic sizing doesn't adapt properly

I successfully achieved my main goal, which was to have a background video at the top of my page. However, I am facing an issue with making the video responsive. Currently, as I decrease the screen size, the video shrinks in both width and height rather th ...

Floating above a surface to manipulate a title

Wondering if it's possible to achieve this without JavaScript, but that would be the ideal scenario. Here's a snapshot of how my page is structured: ____________________________ | TITLE | |This is a fixed header. I wa ...

Arranging data points into one concise column

Important Note: The code above has been automatically generated by JavaServer Faces. I am working with the following code snippet: <span style="display: block;"> <input checked="checked" type="checkbox">ID <select size="1" &g ...

Exciting animation in sidebar links text during toggle transition animation running

As the sidebar collapses, the text adjusts to its width in a choppy transition I'm seeking a way to display the text only when it fits perfectly within the sidebar without breaking into two lines I want the text to appear only after the collapse tra ...

Personalize the contrast of text color in buttons using bootstrap 5

Using bootstrap.build has been a smooth experience for customizing Bootstrap 5 so far. However, when I switched to a React project, things started going wrong. The text inside the buttons turned black and the outline button had the same issue on hover. h ...

Having a bottom border only on input fields appears strange when viewed on a mobile device

When trying to achieve a bottom border on mobile, I encountered an unexpected issue where a strange line appeared instead in the browser. Here is an image of the problem: https://i.sstatic.net/PqEOF.jpg I expected to see a straight line as intended (it w ...

Tips for aligning buttons in the center of a card both vertically and horizontally

I am currently utilizing the following bootstrap template to develop a Help Desk Ticket App: After the user logs in on the index page, there are two cards available for the user to choose between heading to the app's dashboard or creating a ticket. I ...

Remove the icon disc background from a select element using jQuery Mobile

As I delve into building my first jQuery Mobile app using PhoneGap/Cordova, I have encountered some challenges along the way in getting the styling just right, but overall, things are going well. However, when it comes to working with forms, I hit a roadb ...

Graphic background integrated into form input

Is it advisable to create colored shapes in Illustrator, export them as SVG files, and then embed input tags or textareas within these shapes to allow users to enter text? Are there alternative methods we could use for this functionality? https://i.sstat ...

Tips for including space at the beginning and end of a dynamically created table cell

My table is dynamically generated with contents drawn from a database, creating rows based on the data. Each cell has a rounded border and 2px padding for consistency. I want all cells to appear evenly spaced and padded vertically, but I'm facing an ...

Is there a way to alter the color of radio buttons?

Is there a way to use CSS to change the background color of a radio button? I've searched online, but all the solutions I found involve JavaScript, which I don't fully understand. I attempted this CSS code, but it didn't have the desired eff ...

The steps to properly load "child.vue" into the correct position within "parent.vue" are as follows

Currently I am developing a single page web application using Vue.js. This app consists of 4 "page.vue" files, each with a right and left child .vue component nested inside. For instance, the Page1.vue file is structured as follows (omitting style and scr ...

Hide the border below the active tab

Could anyone assist me in removing the border below the selected tab? I've attempted multiple approaches without success. I experimented with adding a negative margin to the tab and creating a white border, but as the border I want to conceal is from ...

The canvas div wrapper flexbox item is in need of scrollbars

I am looking to display a canvas that may be larger than the viewport size. The layout structure will include navigation on the left and controls on the right, with the canvas positioned in between them. When the canvas is too large for the screen, I wan ...

Struggling to align block elements correctly after changing them to inline

I've been trying to align this paragraph while keeping the navigation menu and logo in their correct positions. I attempted to make everything inline, but that didn't work. Then I experimented with the float property, which only made things worse ...