As you can see in the image below the popup list-view shows towards the side and not aligned to the combo-box
This is the code I used:
.combo-box-popup .list-view{
-fx-scale-x: 1.1;
-fx-scale-y: 1.1;
}
.combo-box-base:showing{
-fx-scale-x: 1.1;
-fx-scale-y: 1.1;
}
Is there any solution? or should I just not use fx-scale?
Related
I have a toggle button in my program that starts/stops a script. I would like for this button to be green and say "START" when the button is not selected, and red and say "STOP" when it is selected. More importantly, I would like the unselected hover color to be a slightly darker version of the original green, and the selected hover color to be a slightly darker version of the red color. My current CSS for this button looks like this:
#startStopButton {
-fx-border-color:#d4d4d4;
-fx-background-color:#85eca5;
-fx-background-image: url("startButton.png");
-fx-background-size: 50px;
-fx-background-repeat: no-repeat;
-fx-background-position: 80% 50%;
-fx-alignment: CENTER_LEFT;
-fx-effect: dropshadow(three-pass-box, #e7e7e7, 15, 0, 0, 0);
}
#startStopButton:hover {
-fx-background-color:#80dc9c;
}
#startStopButton:selected{
-fx-background-color: #ff6060;
-fx-text:"STOP";
}
#startStopButton:selected:focused{
-fx-background-color: #ff6060;
-fx-text:"STOP";
}
Currently, this will work fine, except for when the button turns red. In this case, there is no hover effect. Within my FXML controller, there is a function that is activated every time this button is clicked:
private void startStopClick()
{
if(startStopButton.isSelected())
{
startStopButton.setText(" STOP");
// startStopButton.setStyle()
}
else {
startStopButton.setText(" START");
}
}
Is there any way to 1) set the button text within CSS so that I can leave that out of my controller?
2) Get the current toggle button state in CSS, so that I can have multiple hover effects. For example, something like this:
#startStopButton:unselected{
-fx-background-color: #ff6060;
-fx-text:"STOP";
}
If there is no way to do this in CSS, can I set the hover styles in the Java code in the FXML controller?
CSS properties are only available for the look of nodes. With a few exceptions the basic JavaFX nodes don't allow you to specify content via CSS. The text property of buttons is no exception; it cannot be set using CSS.
As for the colors: The rules occuring last override values assigned by rules with the same precedence occuring before them. This means the background color assigned by the rules for #startStopButton:selected and #startStopButton:selected:focused always override the color #startStopButton:hover assigns.
Since in both cases you want a darker color when hovering, the derive function and a lookedup color may work for you.
Example
#Override
public void start(Stage primaryStage) {
ToggleButton btn = new ToggleButton();
btn.getStyleClass().add("start-stop");
btn.textProperty().bind(Bindings.when(btn.selectedProperty()).then(" STOP").otherwise(" START"));
Pane p = new Pane(btn);
Scene scene = new Scene(p);
scene.getStylesheets().add("style.css");
primaryStage.setScene(scene);
primaryStage.show();
}
style.css
.start-stop.toggle-button {
base-color: #85eca5;
-fx-background-color: base-color;
}
.start-stop.toggle-button:selected {
base-color: #ff6060;
}
.start-stop.toggle-button:hover {
-fx-background-color: derive(base-color, -20%);
}
If you cannot use derive since you need to specify different colors for all 4 states you could still rely on looked-up colors to avoid relying on the rule ordering:
.start-stop.toggle-button {
unselected-color: blue;
selected-color: yellow;
-fx-background-color: unselected-color;
}
.start-stop.toggle-button:hover {
unselected-color: red;
selected-color: green;
}
.start-stop.toggle-button:selected {
-fx-background-color: selected-color;
}
Hello Stackoverflow community!
I have this scrollable combobox in my javafx desktop application that I want to be wider as the default is very narrow.
I increase the width by setting:
.scroll-bar > .increment-button,
.scroll-bar > .decrement-button {
-fx-padding: 10.0px;
}
in my css file.
While that widens the scrollbar and its buttons visually the hitboxes actually stay the same size, so if I click like this the combobox popup collapses:
I could not find anyone with a similar issue, which I find weird as this would seem like a very basic issue, unless nobody ever widens scrollbars. So its probably some super obvious little thing that I am doing wrong and everyone else is not ^^.
The following workaround seems to work:
Adjust the size of the arrows instead and use -fx-background-insets to adjust the arrow size:
.scroll-bar .increment-arrow,
.scroll-bar .decrement-arrow {
-fx-pref-height: 20;
-fx-pref-width: 20;
-fx-background-insets: 5;
}
Can anyone please help me with wrapping the text in a legend of a javafx chart. I have pie charts and bar charts. All the legends are placed at bottom. I tried the following but couldn't get it working.
for (Node node : pie.lookupAll(".chart-legend")) {
if (node instanceof Text) {
System.out.println("Text instance");
((Text) node).setWrappingWidth(380);
((Text) node).setManaged(true);
}
if (node instanceof Label) {
System.out.println("Label instance");
((Label) node).setWrapText(true);
((Label) node).setManaged(true);
((Label) node).setPrefWidth(380);
}
}
EDIT:
See the highlighted part. Still some text is not visible.
I finally got it. Trying to wrap text in css didn't work as label width cannot be controlled there. So the following code can be used to wrap the text programmatically.
for (Node node : pie.lookupAll(".chart-legend-item")) {
if (node instanceof Label) {
System.out.println("Label instance");
((Label) node).setWrapText(true);
((Label) node).setManaged(true);
((Label) node).setPrefWidth(380);
}
}
Did you have a look at the CSS documentation?
This link is refering to the chart legend section:
JavaFX CSS Reference
As mentioned, it's of the type Label, so we can have a look here as well.
-fx-wrap-text possibly does the trick. Of course you would need to write and attach your own CSS file to your program...
For a more detailed example, please refer to your JDKs jfxrt.jar, unzip it and look for the modena.css, which is the default CSS file.
Regards.
Daniel
Edit: I got the following snipped to actually have an impact on or application after all:
.chart-legend {
-fx-background-color: transparent;
-fx-padding: 20px;
}
.chart-legend-item-symbol {
-fx-background-radius: 0;
}
.chart-legend-item {
-fx-text-fill: #191970;
}
But it is important, where you place it in your CSS. In my first attempt, I placed it above the CSS rule, which set the default label text color.
When I noticed this, I put it at the end of my CSS file: et vóila - it worked.
So please have a second look, that your placed accordingly in your own CSS.
I would like to provide for user possiblity to select color of TextArea:
private void updateTextArea(){
textArea.setStyle("-fx-text-fill: #" + textColor + "; -fx-background-color: #" + backgroundColor);
}
however this doesnt change color of whole background. Ive found on the Internet that to change backgroud of text Area I need to do something like this in external CSS file.
.text-area .content {
-fx-background-color: black ;
}
how Can I do this with setStyle()?
You can do this by fetching the content node out of the TextArea and applying the style to it. But it works only after the TextArea is shown on the stage.
Usage :
Node node = textArea.lookup(".content");
node.setStyle("-fx-background-color: black;");
I draw more graphs and a lot of measurements graphs, which on lineChart looks like letter rotated H. The number of measurements is dynamic, between 20-1000. First I crate ObservableList for all graphs, then I insert some values, then I add them in seriesLineChart and I add seriesLineChart to lineChart.
Problem is I have tried a lot of solutions but there isn’t any good enough. Some works fine for 5 examples for rest they crashed. I want to set circles for some graphs and to set colors of graphs.
First i crate all I need:
public static LineChart<Date, Number> lineChart; //the line chart
ObservableList<XYChart.Series<Date, Number>> seriesLineChart = FXCollections.observableArrayList(); //I put all graphs into this
ObservableList<XYChart.Data<Date, Number>> Errors = FXCollections.observableArrayList();
ObservableList<XYChart.Data<Date, Number>> graphNext = FXCollections.observableArrayList();
ObservableList<XYChart.Data<Date, Number>> deadLine = FXCollections.observableArrayList();
ObservableList<XYChart.Data<Date, Number>> MaximumError = FXCollections.observableArrayList();
//HERE I MADE DYNAMIC MEASUREMENTS IT DEPENDES OF SOME PARAMETERS
XYChart.Series measurement1;
XYChart.Series measurement1000;
Inserting data to all graphs except measurements
for(int i=0: i<data.length; i++){
GraphNext.add(new XYChart.Data<Date, Number>(new GregorianCalendar(nextYearCalib, Integer.valueOf(splitDate[i])-1, Integer.valueOf(splitDate[i])).getTime(),data[i]));
} //THE LENGTH OF splitDate IS LIKE data AND I DO SOMETHING LIKE THIS FOR ALL GRAPHS EXCEPT Measurements
Measurements goes like this:
for(int i=0: i<measurementX.length; i++){ //X=1...1000(max)
measurementX.getData().add(new XYChart.Data<Date, Number>(new GregorianCalendar(Integer.valueOf(date[0]), Integer.valueOf(date[1])-1, Integer.valueOf(date[2])).getTime(),value));
}
Addding all of those graphs in seriesLineChart:
seriesLineChart.add(new XYChart.Series<>("SOME TEXT WHICH WILL BE TITLE IN LEGEND BELOW THE LINECHART" +, Errors));
seriesLineChart.add(new XYChart.Series<>("SOME TEXT WHICH WILL BE TITLE IN LEGEND BELOW THE LINECHART" +, graphNext));
seriesLineChart.add(new XYChart.Series<>("SOME TEXT WHICH WILL BE TITLE IN LEGEND BELOW THE LINECHART" +, deadLine));
seriesLineChart.add(new XYChart.Series<>("SOME TEXT WHICH WILL BE TITLE IN LEGEND BELOW THE LINECHART" +, MaximumError));
seriesLineChart.add(measurement1);
....
seriesLineChart.add(measurement100); //LET'S SAY FOR X=1..100
Adding seriesLineChart to lineChart:
lineChart.setLegendVisible(true); //sets legend below graph is visible
lineChart.setData(seriesLineChart); //put seriesLineChart
lineChart.setCreateSymbols(false); //this instruction disable to draw circles on every graph
CSS file looks like:
/* graph errors */
.default-color0.chart-series-line {
-fx-stroke: #0181e2, white;
-fx-background-radius: 5px;
}
/* .default-color0.chart-legend-item-symbol{
-fx-stroke: #f9d900, white;
}*/
.default-color0.chart-line-symbol {
-fx-background-color: #0181e2, white;
-fx-background-radius: 5px;
}
/* graph next */
.default-color1.chart-series-line {
-fx-stroke: #ffaaaa, white;
}
/* .default-color1.chart-legend-item-symbol{
-fx-stroke: #a9e200, white;
} */
.default-color1.chart-line-symbol {
-fx-background-color: #ffaaaa, white;
}
/* graph deadline */
.default-color2.chart-series-line {
-fx-stroke: #a9e200, white;
-fx-background-radius: 30px;
}
/* .default-color2.chart-legend-item-symbol{
-fx-stroke: #ff0000, white;
}*/
.default-color2.chart-line-symbol {
-fx-background-color: #a9e200, white;
}
/* graph maxerror */
.default-color3.chart-series-line {
-fx-stroke: #ff0000, white;
}
/* .default-color3.chart-legend-item-symbol{
-fx-background-color: #000000, black;
} */
.default-color3.chart-line-symbol {
-fx-background-color: #ff0000, white;
}
.default-color4.chart-series-line {
-fx-stroke: #000000, white;
}
.default-color4.chart-line-symbol {
-fx-background-color: #000000, white;
}
//AND SO ON TO THE 1000
/* graph measurement */
.default-color1000.chart-series-line {
-fx-stroke: #000000, white;
}
.default-color1000.chart-line-symbol {
-fx-background-color: #000000, white;
}
.default-colorX.chart-series-line is set for color of the measurement graph
.default-color1000.chart-line-symbol is set for color of the legend of the graph
In my code I also have setup CSS file which is not default becaus I need specific colors. It has been setted before I draw on linechart.
scena.getStylesheets().add(getClass().getResource("view/styleLineChart.css").toExternalForm());
As you can se first there are just for graphs and then other are for graphMeasurment.
Before I draw I use: lineChart.setCreateSymbols(false);. But on my Errors and graphNext I need these circles. So I have analized this problems how to solve it:
To make circles in CSS for Errors and graphNext
To enable it and for others (not for Error and graphNext) in CSS to remove circles
I can't add more sereisLineChart on one lineChart, because than it displays the last one.
For example:
lineChart.setData(seriesLineChartErrors);
lineChart.setCreateSymbols(true);
lineChart.setData(seriesLineChartGraphNext);
lineChart.setCreateSymbols(true);
lineChart.setData(seriesLineChart); //all others deadilne, maxError and all mesaruments
lineChart.setCreateSymbols(false);
I didn't fine any method to set Symbols for every graph.
Maybe I haven't planed well my chart, becouse of all Observebal list and ObservebelList of ObservabelLists and so on.
I also styled my legend concluding to the graphs. I use graphs and one just one measurments. Measurments from 2 to X I remove. I want to be my circles ond the legend same as realted graphs.
for(Node n: lineChart.getChildrenUnmodifiable()){
if(n instanceof Legend){
final Legend legend = (Legend) n;
ObservableList<LegendItem> legItem = legend.g!etItems();
for(int i=0; i<legItem.size(); i++){
legItem.remove(5, legItem.size());
legend.setItems(legItem);
}
}
}
I have also tried this for chart to get their CSS I it won't work:
for(Node n: lineChart.getChildrenUnmodifiable()){
if(n instanceof Chart){
final Chart chart = (Chart) n;
chart.getStyleClass());
/*TO ADD SOME CODE TO MANIPULATE CSS BUT I SAW THIS CAN'T BE DONE*/
}
}
I have also tried something like this but I don't now how to program this beacuse of my view/styleLineChart.css. I THINK THIS WOULD BE THE BEST SOLUTION.
val s = new XYChart.Series[Number, Number]();
s.setName(measurementX); //X=[4-1000]
s.getNode.getStyleClass.add("series-" + seriesName);
And my last option would be that I would draw circles and insert them into Errors and graphNext. But I woudn't like to do this.
So I could be more understandable I adapt image with small explanations. The second is how it should look like.
I hope you coudl help me!
First image: https://dl.dropboxusercontent.com/u/30889532/image.png
Second image: https://dl.dropboxusercontent.com/u/30889532/image2.png