0

How to set the margin and the padding of an <ImageView>?

I did fx-padding: 50px; and fx-margin: 50px; but it doesn't work.

My code : 

<ImageView style="fx-padding: 50px; fx-margin: 50px;"
    fitHeight="120" fitWidth="120" fx:id="image" onMousePressed="#mousePressed">
</ImageView>
Slaw
  • 37,820
  • 8
  • 53
  • 80
  • Plain CSS (inline 'style' too) does not use the 'fx-' prefix. Maybe just remove the 'fx-'? – Rene van der Lende Jun 09 '20 at 02:12
  • @Rene This is JavaFX-flavored CSS, all properties are conventionally prefixed with `fx`. – Slaw Jun 09 '20 at 06:10
  • I don't use JavaFX, but it seems (from [JavaFX CSS Reference Guide](https://openjfx.io/javadoc/11/javafx.graphics/javafx/scene/doc-files/cssref.html)) [ImageView](https://openjfx.io/javadoc/11/javafx.graphics/javafx/scene/doc-files/cssref.html#imageview) only has [Node](https://openjfx.io/javadoc/11/javafx.graphics/javafx/scene/doc-files/cssref.html#node) CSS properties, which has no `fx-padding` or `fx-margin` – Rene van der Lende Jun 09 '20 at 13:50

1 Answers1

1

Take a look at the property list of ImageView; there is no such property or any property that would allow you to achieve a similar effect. You may be able to use the layout parameters of the parent layout to achieve the effect; If this is impossible; you need to wrap the ImageView in a layout that does permit this, e.g.:

<StackPane maxHeight="-Infinity" maxWidth="-Infinity"> <!-- use the preferred size for max size constraints -->
    <padding>
        <Insets topRightBottomLeft="50" />
    </padding>
    <children>
        <ImageView fitHeight="120" fitWidth="120" fx:id="image" onMousePressed="#mousePressed"/>
    </children>
</StackPane>
fabian
  • 80,457
  • 12
  • 86
  • 114