How to style a SVG using CSS in javaFX FXML - css

I'm using SVG for an image in a button. But I'm not able to fill in color for it through CSS.
Below is the code to render a button.
<Button onAction="#closeApplication" >
<graphic>
<SVGPath content="M10,16 10,0 0,8z" styleClass="button‐icon‐shape" />
</graphic>
</Button>
here is the css
.button-icon-shape SVGPath{
-fx-fill: red;
}

here is how it worked.
I had to style the button and use the class to style the svg in the button.
<Button onAction="#closeApplication" styleClass="closeButton">
<graphic>
<SVGPath content="M10,16 10,0 0,8z" />
</graphic>
</Button>
here is the css
.closeButton{
}
.closeButton SVGPath{
-fx-fill: red;
}

I am aware this is an old question but this OP solution is not the best one to my mind. If you encountered the same kind of problem, my advise is to read the JavaFX CSS Reference Guide (JFX 8) and especially the redirection to this selectors link.
The simplest solution here with the initial code was the following:
<Button onAction="#closeApplication">
<graphic>
<SVGPath content="M10,16 10,0 0,8z" styleClass="button-icon-shape" />
</graphic>
</Button>
And the JavaFX CSS associated would be :
.button-icon-shape {
-fx-fill:red;
}

Related

Change size of FontAwesomeIcon

I'm using it as inside a button but I don't know how to change its size, to make it smaller more exactly.
import { faSort } from '#fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
...
<button
className="my-button"
onClick={() => this.doSomething()}
type="button">
<FontAwesomeIcon icon={faSort} />
</button>
I've tried in Developer tools to add width, height, size with different values but the icon doesn't change its size. Is it because it's SVG?
Is there a way to make it smaller?
FontAwesome comes with predefined sizes which you can control trough attribute size like this:
<FontAwesomeIcon icon="spinner" size="xs" />
<FontAwesomeIcon icon="spinner" size="lg" />
<FontAwesomeIcon icon="spinner" size="6x" />
But to gain full control I'd recommend adding a classname:
<FontAwesomeIcon icon="spinner" className="inside-button" />
Which can be controlled with CSS like this:
.inside-button {
font-size: 16px;
color: white;
}

How do you use :last-child without defining the elements on the HTML page?

I'm trying to define a group of buttons that are on top of each other with a black border and in order to have no overlapping borders I want to do something like this:
.myCustomButton {
border: 1.5px solid black;
}
.myCustomButton:not(:last-child) {
border-bottom: none;
}
I've tried a few variations of that and had no success. I assume (after some playing around with it) this is because the elements aren't a "group", so there is no actual last child.
I have tried using the "Field Group Ids" but that didn't change much. Also tried giving the "items" its own class and use :last-child on that but that also didn't work.
<VBox xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" width="auto" direction="Column" id="vbox0_copy2">
<items class="a">
<Button xmlns="sap.m" text="1" id="flight1" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
<Button xmlns="sap.m" text="2" id="flight2" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
<Button xmlns="sap.m" text="3" id="flight3" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
</items>
</VBox>
To my understanding, using standard HTML and css where I define the buttons in the HTML file itself should work it out but as far as I know this is how you are supposed to do it:
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "ExampleScreen2"
})
}).placeAt("content");
});
</script>
So, generally speaking, am I wrong to use only one '.placeAt("content")' or am I missing another way to use :last-child correctly?
What happens is that sapui5 add a 'div' layer for each child of a VBox.
that means the generated html will look like
<div> <-- VBox
<div> <-- item 1 container
<button />
</div>
<div> <-- item 2 container
<button />
</div>
...
</div>
thus your selector cannot target a class set on the item itself (because as you said, they are not sibling in the html tree)
to achieve your goal, set a class on the VBox, like 'myCustomButtonContainer' and then set your css as
.myCustomButtonContainer > .sapMFlexItem {
border: 1.5px solid black;
}
.myCustomButtonContainer > .sapMFlexItem:not(:last-child) {
border-bottom: none;
}

JavaFX CSS Button with Image - How to define the size of the image?

I am trying to insert an image in a button using JavaFX CSS. Although, I can do it easily using the "-fx-graphic" tag, I cannot find a way to resize the image in whatever size I want.
I can do this through the following FXML code, where I give 30 to my preferred width of image, but I would like to do this with pure CSS. Is there any way to do that?
FXML
<Button text="Press Me">
<graphic>
<ImageView fitWidth="30">
<image>
<Image url="myImage.png"/>
</image>
</ImageView>
</graphic>
</Button>
CSS
#buttonWithImage {
-fx-graphic: url("myImage.png");
}
I had the same problem and found a workaround: instead of using -fx-image, I use -fx-background-image.
Note: I use an additional lib to use svg file in the following example.
CSS
#buttonWithImage {
-fx-background-image: url('myimage.svg');
-fx-background-size: 30px;
-fx-background-repeat: no-repeat;
-fx-background-position: 90%;
}

Button style with image

I was wondering How one can achieve following button style where text resides underneath of image in JavaFx?
I tried a lot but all in vain. Any help would be appreciated.
The key is the contentDisplay property, set it to "TOP".
With fxml:
<Button contentDisplay="TOP" layoutX="101.0" layoutY="51.0" mnemonicParsing="false" text="Button">
<graphic>
<ImageView mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#image.png" preserveRatio="false" smooth="false" />
</image>
</ImageView>
</graphic>
</Button>
Or CSS:
.your-selector {
-fx-content-display: top;
}
Check the CSS reference here.
You can simply achieve that just by doing
Button b = new Button("text", graphics);
b.setContentDisplay(ContentDisplay.TOP);
And for cool icons, take a look at http://fxexperience.com/controlsfx/features/ it include icone from FontAwesome and IcoMoon

define the height of an image in xul extension

My extension is an overlay that has some images inside a toolbar. I need to display these images small (about 15px), but they render always at the same height of toolbar.
I've already tried to define height and maxHeight of image and of hbox where them are palced but it doesn't work.
here is the piece of code:
...
<toolbox id="navigator-toolbox">
<toolbar id="my-toolbar">
<label>images:</label>
<hbox id="rsour_inputRating">
<image id="rsour_1" />
<image id="rsour_2" />
<image id="rsour_3" />
<image id="rsour_4" />
<image id="rsour_5" />
</hbox>
<toolbarseparator />
...
The correct way is to use -moz-box-align in CSS, or align attribute in xul, so the image doesn't stretch vertically:
#rsour_inputRating{
-moz-box-align:center;
}
#rsour_inputRating img{
list-style-image : url("chrome://...");
width:20px;
height:15px;
}
At the top of the file, add:
<?xml-stylesheet href="chrome://your_ext_name/content/cssFile.css" type="text/css"?>
Then in the css file:
#rsour_inputRating img {height:15px;}

Resources