ColorPicker - height changes upon selection

[runiter]

Initially the height of ColorPicker is exactly same as other controls such ChoiceBox and Button as shown here:

But as soon as you click on the ColorPicker the height is slightly increased permanently as shown here:

[dukke]

Hi @runiter

Sorry for the delay in answering you, but unfortunately too many projects and stuff to do for just one guy :)

I've run ThemeTester to check the color picker. It has the same height in there, might be something in your stylesheets or perhaps you're using an old JMetro version?

Here is the screenshot of ThemeTester (you can also run ThemeTester and check yourself if you'd like):

You can see that the ColorPicker is exactly the same height in all its states (I've added some line guides to make this check even more clear).

Thanks!

[runiter]

Hi @dukke This problem only occurs if with -fx-color-label-visible: false style:

ChoiceBox<String> choiceBox = new ChoiceBox<>(FXCollections.observableArrayList("Hello"));
ColorPicker colorPicker = new ColorPicker();
colorPicker.setStyle("-fx-color-label-visible: false;");
Scene scene = new Scene(new HBox(choiceBox, colorPicker), 800, 600);
stage.setScene(scene);
JMetro jMetro = new JMetro(scene, Style.DARK);
jMetro.setAutomaticallyColorPanes(true);
stage.show();

The zoomed in result after ColorPicker receive focus via click:

[dukke]

OK, is that a css property exclusive of ColorPicker? I haven't styled ColorPicker yet

[runiter]

I did not apply any extra css style to the ColorPicker. The only code used to produce this screen is the code outlined above. If you haven't styled ColorPicker yet, then it seems like it's picking up the styling from jmetro somehow anyways. Because as you can see it is rendering it in Dark mode instead of the default modena.

[dukke]

Some controls inherit styles from other styleclasses because they use that styleclass as well. It's probably picking up the style defined for combobox, which is fine. It just needs some tweaks to it. Then I'd also have to style the color picker popup.

[dukke]

I don't know the "-fx-color-label-visible" css property, will need to have a look..

[runiter]

oops, I just realized that you were asking me. Yes I did apply that single css style (-fx-color-label-visible) and yes that property is exclusively for ColorPicker. No other control supports that style.

Here's the spec:

https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#colorpicker

[dukke]

I've checked again with Javafx 11 and Javafx 8 versions and doesn't seem to happen anymore. @runiter can you recheck with latest version?

Mind you there's some withstanding changes that are in the repo but haven't been publicly released to a jar, though I doubt those changes would have an impact on this particular issue.

[runiter]

Certainly. Where can I download the latest version from? I can't seem to find it here: https://github.com/JFXtras/jfxtras-styles/releases

[dukke]

Hi Saeid, version 11.6.10 and 8.6.10 are now available on the usual places. It includes bug fixes and a new style for ColorPicker. Release notes are present in the github release page of each version.

[runiter]

Unfortunately the problem still persists. The height changes as soon as the ColorPicker is clicked when running the short code above.

Also I'm not sure if this release was supposed to skin ColorPicker, but the problem with ColorPicker dialog still exists too. Although it no longer throws any exceptions.

[dukke]

Hmm.. that's strange given I'm getting different results when I run myself.

The example running on my machine

My Setup

• JMetro 11.6.10,
• Java 11.0.4 (Oracle)
• Gradle with JavaFX plugin: id 'org.openjfx.javafxplugin' version '0.0.8'
• Following JavaFX directive in the Gradle script: javafx { version = "11.0.2" modules = [ 'javafx.controls' ] }

The Result:

And after pressing to open the custom color dialog of the ColorPicker:

There's something strange going on with the custom color Dialog at the left running this example and in the controls section with the border around it. Will have to look at it. Though it's unrelated to this issue in discussion which is only about ColorPicker getting focused and the border around it.

About your issue

Can you tell me more info about your setup?

• java version
• javafx version
• IDE
• build tool: gradle? Maven? etc? (though can't give you much help if you're using anything other than Gradle since I'm not a regular user of other build tools)
• anything else you remember and might be causing any issues

Make sure you're using version 11.6.10 or 8.6.10 of JMetro and that there's no caching issues or something that's making you get an older version

Thanks,

[runiter]

I'm using Java 1.8.0_241 With Javafx version that comes built in Java 8. Using IntelliJ IDE. Although same problem exists when running jar file outside of IDE. I use ant to build the jar file. So neither maven nor gradle.

It would be nice if you can fix it, but this is not of highest priority. The problem that you already noticed in custom color Dialog is of higher priority for me since it's a real blocker for my users.

[dukke]

Now I'm also getting the issue. I thought you were using javafx 11 version.

As for the other higher priority issue, just stop using setAutomaticallyColorPanes(true). If you don't use it that issue won't happen. That property is supposed to be deprecated and I will probably remove it in a later version. Would be more work to support both automaticallyColorPanes and the regular add ' background' styleclass approach. The more I can cut back work the better, too many projects and too little time 😂. The other approach of adding the background style class is also preferred anyway. Just use that approach by referencing the JMetroStyleClass.BACKGROUND constant.

[runiter]

Ah nice! Avoiding setAutomaticallyColorPanes(true) worked! How do I use background constant? I tried pane.setStyle(JMetroStyleClass.BACKGROUND) but it didn't work.

[dukke]

No, you have to add a styleclass. For reference check out the documentation's "Backgrounds" section. Here's the link: https://pixelduke.com/java-javafx-theme-jmetro/#Backgrounds

Cheers

[runiter]

Thank you that worked. One more problem though. If I apply the following css to get rid of X from all TextFields:

.text-field {
    -fx-skin: "com.sun.javafx.scene.control.skin.TextFieldSkin";
}

I get the exception below. Is there a better way to get rid of the X button?

Apr 21, 2020 11:02:27 PM javafx.scene.control.Control loadSkinClass
SEVERE: Failed to load skin 'com.sun.javafx.scene.control.skin.TextFieldSkin' for control WebColorField@b5dd29[styleClass=webcolor-field web-field text-input text-field]
java.lang.IllegalArgumentException: java.lang.ClassCastException@e7139c
	at sun.reflect.GeneratedConstructorAccessor20.newInstance(Unknown Source)
	at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
	at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
	at javafx.scene.control.Control.loadSkinClass(Control.java:735)
	at javafx.scene.control.Control$4.invalidated(Control.java:661)
	at javafx.beans.property.StringPropertyBase.markInvalid(StringPropertyBase.java:109)
	at javafx.beans.property.StringPropertyBase.set(StringPropertyBase.java:144)
	at javafx.css.StyleableStringProperty.set(StyleableStringProperty.java:83)
	at javafx.scene.control.Control$4.set(Control.java:653)
	at javafx.css.StyleableStringProperty.applyStyle(StyleableStringProperty.java:69)
	at javafx.css.StyleableStringProperty.applyStyle(StyleableStringProperty.java:45)
	at javafx.scene.CssStyleHelper.transitionToState(CssStyleHelper.java:774)
	at javafx.scene.Node.impl_processCSS(Node.java:9189)
	at javafx.scene.Parent.impl_processCSS(Parent.java:1249)
	at javafx.scene.control.Control.impl_processCSS(Control.java:868)
	at javafx.scene.Parent.impl_processCSS(Parent.java:1280)
	at javafx.scene.Parent.impl_processCSS(Parent.java:1280)
	at javafx.scene.Parent.impl_processCSS(Parent.java:1280)
	at javafx.scene.Node.processCSS(Node.java:9056)
	at javafx.scene.Scene.doCSSPass(Scene.java:545)
	at javafx.scene.Scene.preferredSize(Scene.java:1643)
	at javafx.scene.Scene.impl_preferredSize(Scene.java:1720)
	at javafx.stage.Window$9.invalidated(Window.java:864)
	at javafx.beans.property.BooleanPropertyBase.markInvalid(BooleanPropertyBase.java:109)
	at javafx.beans.property.BooleanPropertyBase.set(BooleanPropertyBase.java:144)
	at javafx.stage.Window.setShowing(Window.java:940)
	at javafx.stage.Window.show(Window.java:955)
	at javafx.stage.Stage.show(Stage.java:259)
	at com.sun.javafx.scene.control.skin.CustomColorDialog.show(CustomColorDialog.java:198)
	at com.sun.javafx.scene.control.skin.ColorPalette$1.handle(ColorPalette.java:127)
	at com.sun.javafx.scene.control.skin.ColorPalette$1.handle(ColorPalette.java:105)
	at com.sun.javafx.event.CompositeEventHandler.dispatchBubblingEvent(CompositeEventHandler.java:86)
	at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:238)
	at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:191)
	at com.sun.javafx.event.CompositeEventDispatcher.dispatchBubblingEvent(CompositeEventDispatcher.java:59)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:58)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
	at com.sun.javafx.event.EventUtil.fireEventImpl(EventUtil.java:74)
	at com.sun.javafx.event.EventUtil.fireEvent(EventUtil.java:49)
	at javafx.event.Event.fireEvent(Event.java:198)
	at javafx.scene.Node.fireEvent(Node.java:8411)
	at javafx.scene.control.Hyperlink.fire(Hyperlink.java:153)
	at com.sun.javafx.scene.control.behavior.ButtonBehavior.mouseReleased(ButtonBehavior.java:182)
	at com.sun.javafx.scene.control.skin.BehaviorSkinBase$1.handle(BehaviorSkinBase.java:96)
	at com.sun.javafx.scene.control.skin.BehaviorSkinBase$1.handle(BehaviorSkinBase.java:89)
	at com.sun.javafx.event.CompositeEventHandler$NormalEventHandlerRecord.handleBubblingEvent(CompositeEventHandler.java:218)
	at com.sun.javafx.event.CompositeEventHandler.dispatchBubblingEvent(CompositeEventHandler.java:80)
	at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:238)
	at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:191)
	at com.sun.javafx.event.CompositeEventDispatcher.dispatchBubblingEvent(CompositeEventDispatcher.java:59)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:58)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
	at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
	at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
	at com.sun.javafx.event.EventUtil.fireEventImpl(EventUtil.java:74)
	at com.sun.javafx.event.EventUtil.fireEvent(EventUtil.java:54)
	at javafx.event.Event.fireEvent(Event.java:198)
	at javafx.scene.Scene$MouseHandler.process(Scene.java:3757)
	at javafx.scene.Scene$MouseHandler.access$1500(Scene.java:3485)
	at javafx.scene.Scene.impl_processMouseEvent(Scene.java:1762)
	at javafx.scene.Scene$ScenePeerListener.mouseEvent(Scene.java:2494)
	at com.sun.javafx.tk.quantum.GlassViewEventHandler$MouseEventNotification.run(GlassViewEventHandler.java:394)
	at com.sun.javafx.tk.quantum.GlassViewEventHandler$MouseEventNotification.run(GlassViewEventHandler.java:295)
	at java.security.AccessController.doPrivileged(Native Method)
	at com.sun.javafx.tk.quantum.GlassViewEventHandler.lambda$handleMouseEvent$2(GlassViewEventHandler.java:432)
	at com.sun.javafx.tk.quantum.QuantumToolkit.runWithoutRenderLock(QuantumToolkit.java:410)
	at com.sun.javafx.tk.quantum.GlassViewEventHandler.handleMouseEvent(GlassViewEventHandler.java:431)
	at com.sun.glass.ui.View.handleMouseEvent(View.java:555)
	at com.sun.glass.ui.View.notifyMouse(View.java:937)
	at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
	at com.sun.glass.ui.win.WinApplication.lambda$null$4(WinApplication.java:186)
	at java.lang.Thread.run(Thread.java:748)

[dukke]

Yes, there is a better way.

Check out this blog post: https://pixelduke.com/2019/12/02/jmetro-version-11-6-and-8-6-released/ Check the session on the new css property for textfield JMetro skin and use that instead.

Cheers.

[runiter]

Fantastic. That worked, thank you!

[dukke]

Closing this issue as it only happens on Javafx 8 and javafx 8 is in maintenance mode (not enough free spare time to support old javafx versions).

Thanks!