MaterialFX icon indicating copy to clipboard operation
MaterialFX copied to clipboard

MFXGenericDialogBuilder does not pick the styles -fx-border-color and -fx-border-width

Open stefanofornari opened this issue 2 years ago • 3 comments

Describe the bug MFXGenericDialogBuilder does not pick the styles -fx-border-color and -fx-border-width.

To Reproduce Create a general dialog like MFXGenericDialogBuilder.build() .setHeaderText(LABEL_ADD_WALLET_DIALOG_TITLE) .setContent(new EasyWalletFXMLLoader().loadAddWalletDialogContent()) .setShowClose(false) .setShowAlwaysOnTop(false) .setShowMinimize(false) .get()

And make sure to style its border, for instance with: .mfx-dialog { -fx-background-radius: 0; -fx-border-radius: 0; -fx-border-color: black; -fx-border-width: 10; }

The dialog create picks -fx-background-radius and -fx-border-radius, but it does not pick -fx-border-color and -fx-border-width. See the below screenshot, where you can notice the corners are square, but the border is not applied. I tryied to look into the source code, but I could not find any clue about why this happens.

Expected behavior all styles picked up

Screenshots image

stefanofornari avatar Aug 04 '22 19:08 stefanofornari

Very strange... the only way I found to set border color and with is setting the styles explicitly with

dialog.setStyle(
   "-fx-border-color: red; -fx-border-width: 1"
);

I checked the source code for the MaterialFX classes and even JavaFX, but I really do not understand why. The other border styles seem to be picket normally from the css...

stefanofornari avatar Aug 06 '22 14:08 stefanofornari

Yeah it's a bit complicated, it's a stupid shit by JavaFX Long story short there must be some other "source" setting those properties and it has a higher priority which means that it won't allow your stylesheet to overwrite those properties The setStyle method doesn't follow this priority system, it has the highest priority, ignores everything, sets the style and works always Of course the downside is that you must do it in the code and you lose the versatility of CSS I'll investigate the issues as soon as I have the time to do it

palexdev avatar Aug 06 '22 16:08 palexdev

Thanks Alex, it would be great to fix it, it would make skinning more consistent and easier.

Of course the downside is that you must do it on code and you lose the versatility of CSS I'll investigate the issues as soon as I have the time to do it

I managed to overcome this with the following code:

dialog.getStylesheets().add(
    EasyWalletMain.class.getResource("/css/easywallet.css").toExternalForm()
);
dialog.setStyle(
    "-fx-border-color: -ew-primary-color;"
 );

In the stylesheet I define ew-primary-color, which I reference when setting the style...

stefanofornari avatar Aug 07 '22 06:08 stefanofornari