put rotate only in icon from css

tretonis-JavaNet

it is possible to place rotation icon in css from "Button" ?

Thank's

.my-button {
    -fx-skin: "com.sun.javafx.scene.control.skin.ButtonSkin";
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 5, 5, 4, 3;
    -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em;
    -fx-text-fill: -fx-text-base-color;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
    
    -fx-graphic: url('images/vector-combine.png');   /* <--- put rotate only icon into Button ??? */ 

}

jsmith

No, you cannot rotate a button graphic defined by -fx-graphic using CSS.

You could perform the rotation via FXML or in Java Code, but not via CSS.

*Update* -> I was wrong, see bouye's answer below for a solution of how to rotate the graphic using CSS.

David Grieve-Oracle

You can get the graphics node from the button via the graphicProperty(),  set a style-class on it, and use css as you wish. Add a listener to the graphicProperty and set the style-class there.

tretonis-JavaNet

Dear David, thank you for sharing your knowledge and your precious time.

I will test your solution.

Thank you

bouye-JavaNet

Actually you can simply do this:

.my-button {  
    -fx-graphic: url('images/vector-combine.png');   /* <--- put rotate only icon into Button ??? */   
}  
.my-button .image-view {  
    -fx-rotate: 45;
}  

tretonis-JavaNet

Thank's bouye-JavaNet, is possible put  width and height into image-view ?

bouye-JavaNet wrote:

Actually you can simply do this:

1. .my-button .image-view {   
2.     -fx-rotate: 45;    /* <----  yes work correct   */
3.     -fx-pref-width : 16px;   /* no work   */
4.     -fx-pref-height : 16px;  /* no work   */
5. }   

.my-button {  
    -fx-graphic: url('images/vector-combine.png');   /* <--- put rotate only icon into Button ??? */   
}  
.my-button .image-view {  
    -fx-rotate: 45;
}  

other question :

   into caspian.css no have ".image-view",   where you found ".image-view" ?

Thank's

jsmith

>    into caspian.css no have ".image-view",   where you found ".image-view" ?

Not everything is in caspian.css.  You can determine the actual CSS used in a SceneGraph, using ScenicView:

Scenic View //  JavaFX News, Demos and Insight // FX Experience

You should probably be using Java 8+ anyway, that uses modena.css, not caspian.css.

> is possible put width and height into image-view ?

I don't know the answer to this one either, ImageView has fitWidth/fitHeight properties and an image itself can have it's size specified in it's constructor, but I don't think any of that information is exposed through css attributes (although, maybe bouye or somebody else knows how to accomplish this).

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/ImageView.html#fitWidthProperty

tretonis-JavaNet

Unfortunately css documentation javafx is poor, lacks examples the level of internal engineering, but the idea is great.

bouye-JavaNet

Yes, as pointed by jsmith, by using ScenicView you would have been able to notice that, when using JavaFX 8, the ImageView created by the CSS' -fx-graphic selector sports the "image-view" style class. It's basically just what I did before coming up with the CSS I gave you.

Now I agree that:

• It's poorly described both in the CSS guide for -fx-graphic and in the javadoc for Labelled.
• When setting a graphic on a Labelled that node should receive the "graphic" (or something similar) style class for better styling.

bouye-JavaNet

Also no, you cannot set fit-width and fit-height in CSS currently, see: https://bugs.openjdk.java.net/browse/JDK-8152187