Modifying the border color of a row may result in unexpected shifting of cells

To enhance the appearance of certain rows in my table, I have customized their styles for highlighting purposes:

table.setRowFactory(tv -> new TableRow<TableBean>() {

        @Override
        public void updateItem(TableBean item, boolean empty) {

            super.updateItem(item, empty);
            if (item == null) {
                setStyle("");
            } else if (item.getComparisonElement().isMarker()) {
                setStyle("-fx-border-color: red;");
            } else {
                setStyle("");
            }
        }
    });

Although this method achieves the desired highlighting effect, it unfortunately causes some cells to become "shifted" as an unintended consequence:

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

cssjavafxcolorstableview

Answer №1

It seems that the inconsistent use of borders in some rows is causing layout issues.

The modena.css default stylesheet achieves border effects by employing "nested backgrounds". Essentially, it first applies a solid background color without any insets, followed by a second background color with a positive inset to create the illusion of a border. For instance, if you set a red background with no insets and then add the default background color with a 1-pixel inset on each side, it will simulate a 1-pixel wide red border. Although not confirmed with concrete evidence, this technique may offer better performance compared to using actual border settings. The benefit in this scenario is that adding a real border would impact the table row's layout as space needs to accommodate the border width, whereas adjusting the background color has no effect on the layout.

Consider implementing the following approach:

table.setRowFactory(tv -> new TableRow<TableBean>() {

    @Override
    public void updateItem(TableBean item, boolean empty) {

        super.updateItem(item, empty);
        if (item == null) {
            setStyle("");
        } else if (item.getComparisonElement().isMarker()) {
            setStyle("-fx-background-color: red, -fx-background;"+
                     "-fx-background-insets: 0, 1;");
        } else {
            setStyle("");
        }
    }
});

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

What is the best way to transform this unfamiliar CSS element into JavaScript code?

I'm facing an issue where I want to animate a CSS image based on time constraints, but since it's in CSS, I'm unable to achieve the desired effect. The animation in question is not the sun itself, but rather a yellowish half-circle animation ...

javascriptjqueryhtmlcssweather

The height of my row decreases when I implement the z-index for a hover effect

Hey there! I'm currently working on creating a hover effect for my cards using Bootstrap and z-index. However, I've run into an issue where the z-index works fine when I hover over the cards, but the row loses its height. I tried adding a height ...

javascripthtmlcssreactjsbootstrap-4

Unable to locate CSS/SCSS Code module in VSCode when using a relative path

I am currently developing a SharePoint Framework web-part in VS Code. Despite my efforts, I am unable to locate my scss styles file, even though it is stored in the same directory - please refer to the image provided below: https://i.sstatic.net/LanF7.pn ...

cssangulartypescriptvisual-studio-code

Develop a CSS layout for the specified design

Aiming to achieve a unique layout using dynamic html strings. The challenge arises when transitioning to the second page as the layout does not adjust upward and images cannot be added to the first page. Attempting to implement the following sample code ...

htmliosswiftcss

The Angular UI Bootstrap Datepicker fails to appear on top of the Bootstrap Modal

I'm currently working on an Angular app that utilizes UI Bootstrap. Within my app, I have a modal containing a Datepicker at the bottom. However, I've encountered an issue where the Datepicker remains confined within the modal when expanded. I at ...

javascripthtmlcssangularjsangular-ui-bootstrap

A guide to entering information into an input field with JavaScript for logging in successfully

https://i.stack.imgur.com/TF51Z.gif https://i.stack.imgur.com/HHsax.png https://i.stack.imgur.com/HUztt.png When attempting to input text using document.getelement('').value="" , it doesn't behave as expected. The text disappear ...

javascripthtmljquerycssajax

Is it possible to conceal glyphicons by employing the attribute hidden="hidden"?

Is it possible to conceal a glyphicon icon in this manner? <i class="glyphicon glyphicon-remove-circle" title="Please add a suitable value" id="author" hidden="hidden"></i> <p>Author</p> ...

csshtmlglyphicons

Maintain original child process stdout color formatting when piping into process.stdout

Whenever I run npm run dev, the terminal window displays colors thanks to next.js. However, if I try to execute this command within a node.js file, like so; const child_process = require('child_process'); const child = child_process.spawn(&apos ...

node.jscolorsprocessstdout

Jquery Error in Bootstrap and DataTables Integration

My knowledge of frontend coding is limited, so please bear with me. Initially, my website was using MVCContrib grid along with its own CSS style. Recently, I switched to Bootstrap which caused MVCContrib to stop working. I've been struggling to integ ...

csstwitter-bootstrapdatatables

Change all instances of the asterisk character to a red color on every page using CSS styling

Is it possible to change the color of the asterisk that indicates required fields on all forms across my site without having to wrap it in a div or another wrapper? ...

cssvalidationrequired

The performance of the image slider is not smooth

After creating a basic javascript/css image slider as a learning exercise, I am now looking to implement it in real-world projects. However, the animation is choppy on my high-spec desktop and even worse on mobile devices. You can view the slider in action ...

javascripthtmlcsstransform

Exploring the capabilities of Angular 9 with mat-table's multiTemplateDataRows feature to enhance the user experience by enabling simultaneous hover effects on multiple rows

Seeking advice as a newcomer to Angular, I am encountering an issue with mat-table and multiTemplateDataRows. Essentially, each element from my data source is displayed on two rows in the table. When I hover over row 1, only row 1 is highlighted, and the s ...

cssangularmat-table

Organizing an array of objects within MUI cards based on social media platforms

I'm currently developing an application that showcases athlete data in a grid layout using MUI Grid. The colored borders on the left side of each card are determined by the corresponding social network associated with that athlete. https://i.sstatic. ...

javascriptcssreactjsmaterial-uigrid

The influence of 'overflow' values, aside from 'visible', on the block formatting context

Not quite like this particular question on Stack Overflow, mine doesn't involve float issues but rather troubles with applying margins to a block-level element's only child. I encountered a dilemma while attempting to add a margin to an only-chi ...

htmlcss

Unfortunate Outcome: CSS Request Results in 404 Error

Recently, I made a transition from having a single-page website to using an express server for my website. During this process, I had to modify the file paths. However, I am encountering difficulties in loading my css and js files. Upon inspecting the dev ...

htmlcssexpress

Click event triggers nested bootstrap collapse

As a beginner in bootstraps and coding, I am currently experimenting with opening the main bootstrap panel using an onclick event that includes nested sub panels. Here is my index.html file containing the panels and the button; <link href="https://m ...

javascriptjqueryhtmlcsstwitter-bootstrap

Displaying divs inline with overlapping child divs

As a beginner in CSS, I tackle the challenges of learning it every day. Despite feeling clumsy and not naturally adept at it, my determination is strong (although sometimes my brain feels like an old computer on the verge of overheating). My current goal i ...

htmlcss

Apply CSS styles conditionally to an Angular component

Depending on the variable value, I want to change the style of the p-autocomplete component. A toggle input determines whether the variable is true or false. <div class="switch-inner"> <p [ngClass]="{'businessG': !toggle }" clas ...

htmlcssangulartypescriptprimeng

Child element casting shadow over parent element

I am currently using box shadow for both the parent (.map) and child (.toggle-button): .map { position: fixed; top: 20px; right: 0; width: 280px; height: 280px; z-index: 9999; box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3); } .map ...

javascriptjqueryhtmlcss

Hovering causes adjacent elements to shift to the right

Whenever I hover over one of the long <li> elements, the other elements shift to the right. To view the fiddle code, click on the link below: .footer_links{ margin-top:60px; } footer .ourServices{ ...

htmlcss