palexdev / MaterialFX

A library of material components for JavaFX
GNU Lesser General Public License v3.0
1.21k stars 122 forks source link

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

Closed stefanofornari closed 1 year ago

stefanofornari commented 2 years ago

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 commented 2 years ago

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...

palexdev commented 2 years ago

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

stefanofornari commented 2 years ago

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...

palexdev commented 1 year ago

Version 11.14.0 should have fixed the issue Feel free to re-open and let me know if it doesn't