I want to know how to change the inside border color that appears in the text area. I want to delete de blue transparent border inside the red border of the text area. I have checked the modena.css file but I can not find the solution.
What I have in my css file:
.text-area:focused {
-fx-background-color: white;
-fx-border-color: rgba(229,0,0,0.3);
}
TextArea has an additional border/background on its content. To change/get rid of it, you need an additonal style in your css.
Something like
.text-area:focused .content {
-fx-background-color: white;
}
not sure if that's safe enough: it is not documented (or at least I could not find any doc for it), only available as implementation, f.i. in the extracted modena.css
I use the following code to get rid of the auto-generated focus effects of a textarea:
* {
-fx-focus-color: transparent;
-fx-border-style: none;
}
or
.textarea {
-fx-focus-color: transparent;
-fx-border-style: none;
-fx-background-radius: 0.0px;
-fx-border-radius: 0.0px;
}
To get rid of all the default styling, which includes a rounded border...
Related
I am trying to make selected button look completely like unselected. All I need is to be able to check whether button was clicked or not. I have tried almost everything but still can't do what I want. Now I have this css. If button is selected its
lower border becomes thicker than others. Is there any possibility to get rid of that, so all the borders of selected button will be the same size?
.button {
-fx-focus-color: transparent;
}
.button:focused {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
.button:hover {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
This is how it looks like
I am currently using jfoenix's combobox but my problem is that I can't edit the prompt text color inside of it. It keeps using the default color grey. How can I change the font color of the combobox from grey to white? Is there any way to do this in css?
This is how it looks like:
I hope you can help me out with this.
Thank you in advance.
I am answering my own question for other people's reference. For some reason the font color of the Jfoenix combobox wasn't editable in css. So what I did instead is used the standard combobox provided and simply changed the css to make it look like the Jfoenix combobox.
This is the css style I used for combo-box:
.combo-box,
.choice-box {
-fx-font-size: 12px;
-fx-prompt-text-fill: black;
-fx-text-fill: black;
-fx-background-color: none;
-fx-border-width: 0 0 1 0;
-fx-border-color: #bdbdbd;
-fx-padding: 0 0 3 -8;
}
.combo-box .list-cell:filled:selected .text,
.choice-box .list-cell:filled:selected .text {
-fx-fill: black;
}
.combo-box .arrow,
.choice-box .arrow {
-fx-background-color: #4d4d4d;
}
I figured it out. You just need to add the following line to a css file overriding the jfoenix css.
.jfx-combo-box {
-fx-prompt-text-fill: white;
}
I have some classical Button in JavaFX with a box containing some text.
I need buttons without that box, just the text, and when I hover the button or click on the button with mouse, it shall change its color to different.
In JavaFX styling is done by using CSS.
.button{
-fx-border-color: transparent;
-fx-border-width: 0;
-fx-background-radius: 0;
-fx-background-color: transparent;
-fx-font-family:"Segoe UI", Helvetica, Arial, sans-serif;
-fx-font-size: 1em; /* 12 */
-fx-text-fill: #828282;
}
.button:focused {
-fx-border-color: transparent, black;
-fx-border-width: 1, 1;
-fx-border-style: solid, segments(1, 2);
-fx-border-radius: 0, 0;
-fx-border-insets: 1 1 1 1, 0;
}
.button:pressed {
-fx-background-color: black;
-fx-text-fill: white;
}
Add this code to a CSS file, save it to the directory where the source file of the control exists which contains you buttons. Then in this class:
getStylesheets().add(getClass().getResource("nameofyourcssfile.css").toExternalForm());
Then all of the buttons that that object contain will use this style-classes.
Modification on your need is straightforward.
Good tutorial to start:
http://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm
JavaFX has a Hyperlink control which basically has all the functionality you are looking for. It fires ActionEvents in the same way as a button:
Hyperlink button = new Hyperlink("Some text");
button.setOnAction(e -> System.out.println("Hyperlink clicked"));
Like a link in a web page, it will appear in a different color if it has been "visited", i.e. if an action has been fired on it.
This is how you can do it in scenebuilder
Choose the button by clicking on it.
Then in properties->Style Choose "-fx-background-color" and put value as " transparent"
Like this
For anyone who got here looking for a way to remove the default button background, it can be done like this:
button.setBackground(null);
If you want to restyle the button I'd suggest using css like the answer above.
I am currently trying to learn Javafx and i am having problems with modifying a Textarea with css. THe picture below shows best what the problem is:
I designed it with Scene Builder. Below is the CSS code for the text area:
.text-area .content{
-fx-background-color: #2d2d2d;
-fx-text-fill: white;
}
.text-area{
-fx-background-color: #2d2d2d;
-fx-text-fill: white;
}
.text-area:focus .content{
-fx-background-color: #2d2d2d;
-fx-text-fill: white;
}
I have tried commenting stuff out, but the white dots remain. So my Question is how to fix this.
I had a Java FXML application functioning in Java 7u51 that I built in NetBeans 7.4.
I have installed Java 8 and NetBeans 8.
I recreated my little application in Java 8/NetBeans 8. Everything is working except some of the css styling. Specifically, I have a Text Area.
Here is the Text Area FXML:
<TextArea layoutX="1" layoutY="230" minHeight="120" minWidth="320" editable="false" fx:id="eventWindow" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.bottomAnchor="0.0"/>
Here is the corresponding css styling:
#eventWindow {
-fx-background-color: black;
-fx-text-fill: white;
}
When I run the application, the background of my text area stays white! What's frustrating is that other things from my css file are behaving as they should. I have already tried the following:
1) I tried putting this in my css:
.events {
-fx-background-color: black;
-fx-text-fill: white;
}
...and adding 'styleclass="events"' into my FXML.
2) and I tried:
.textarea {
-fx-background-color: black;
-fx-text-fill: white;
}
no dice on either of those.
I have also double-checked to make sure that nothing could be overriding it. And... it's working just fine in Java 7u51.
I know this is not the most critical thing on the planet... but it's driving me nuts!
Thanks in advance!
-Adeena
The problem is that the TextArea consist of several nodes (TextArea,ScrollPane,Content). To change the background of the content node the following css can be used:
.text-area .scroll-pane .content{
-fx-background-color: black;
}
The substructure of nodes is explained in the JavaFX css documentation: http://download.java.net/jdk8/jfxdocs/javafx/scene/doc-files/cssref.html#textarea
Here's a link to a related issue: https://javafx-jira.kenai.com/browse/RT-31904
in the fxml styleClass="eventWindow"
and then in the css
.eventWindow {
-fx-background-color: black;
-fx-text-fill: white;
}
works for me