I have a label with style class "test" in my javafx application.
I wanted to add white border around this label, so in the css file I tried:
-fx-border-width: 2;
-fx-border-color: white;
but that didnt worked so then i tried to add:
-fx-border-style: solid;
but that didnt worked either, following javafx css reference I didn't find anything useful.
what am I doing wrong?
Can you try:
System.out.println(label);
it should print something like
Label#1858c80c[styleClass=label]
Is your css class printing too after styleClass=label ... ?
Or can you remove css class of the label and try setting the label style in code directly by:
label.setStyle("-fx-border-color: white;");
if you can see the changes then maybe you are unintentionally overriding css class definiton in css file. Check it.
Related
I want to apply CSS for Vaadin 23 label but its not working properly. Please suggest me appropriate process.
Label label1 = new Label("Temp");
label1.addClassName("bold-label");
vaadin-label.css:
:host(.bold-label) [part~="label"] {
font-weight: bold;
color:red;
}
Label is standard HTML element. See Mozilla Developer documentation. Not a specific Vaadin crafted component with shadow DOM (where you would need the vaadin-*.css in the components folder).
Instead you can put your css inside styles.css and use a simple label.bold-label selector.
https://i.stack.imgur.com/Y76Fl.png
On this picture on left side - running java program, and right side - Scene builder layout.
This is my github code: https://github.com/captsmile/calc
You can do the following code in .css file
.button
{
-fx-background-color: transparent;
}
This will make the color of button as the color of your application's background color(due to transparency).
Furthermore you may also apply some effects to make your button looks more cool. To add effects
.button:hover
{
-fx-background-color: yellow;
}
.button:pressed
{
-fx-background-color: brown;
}
At the end ,you may attach the case file with your file(suppose index.java file in which you want to apply css) by writing following code in your index.java
scene.getStylesheets().add(getClass().getClassLoader().getResource("application.css").toExternalForm());
Where application.css is the css file with whole css code given above . This application file must be present in your src folder.
I fixed this removing border at GridPane
.root{
-fx-padding: 5;
-fx-border-style: none;
-fx-border-width: 0;
-fx-border-insets: 0;
}
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
You can do it by JavaFX CSS selectors on the button.
The answer in this link check it out, and there are also many JavaFX related examples you may interested in:
http://tutorials.jenkov.com/javafx/button.html
I have a TextArea() and would like to hide the vertical/horizontal scroll bars. I see that the control seems to have a built in scroll-pane that shows as needed.
TextArea numberPane = new TextArea();
numberPane.setEditable(false);
numberPane.setMaxWidth( 75 );
// Set the characteristics of our line number pane
numberPane.setId( "line-number-pane" );
In my CSS file I have the follow settings.
#line-number-pane
{
-fx-text-fill: white;
-fx-background-color: black;
-fx-font: 12px "Courier New";
-fx-font-family: "Courier New";
-fx-font-weight: bold;
}
#line-number-pane .scroll-pane
{
-fx-hbar-policy : never;
-fx-vbar-policy : never;
}
As expected the text area font/color/size works just fine. However, the scroll-pane policy doesn't seem to work.
Should I be able to hide the scroll bars via the CSS file or is there some code that will do the trick.
Thanks.
From How can I hide the scroll bar in TextArea?:
Remove Horizontal Scrollbar
textArea.setWrapText(true);
Remove Vertical Scrollbar
ScrollBar scrollBarv = (ScrollBar)ta.lookup(".scroll-bar:vertical");
scrollBarv.setDisable(true);
CSS
.text-area .scroll-bar:vertical:disabled {
-fx-opacity: 0;
}
I just did it very simply using a StyleSheet:
CSS
.text-area .scroll-bar:vertical {
-fx-pref-width: 1;
-fx-opacity: 0;
}
.text-area .scroll-bar:horizontal {
-fx-pref-height: 1;
-fx-opacity: 0;
}
No need for all that whacky code.
I observed code of TextAreaSkin class, and found, that a
void layoutChildren(x, y, w, h) method, which is called "during the layout pass of the scenegraph" and de facto, each time, when something happens with a control, contains a code, which changes hbarPolicy and vbarPolicy between AS_NEEDED and NEVER, according to the current state of control.
So, looks like, there is no chance to do somethign with it, using a css.
Try to just make scrollbars invisible. But, as I see code of ScrollPaneSkin, scrollBars are created once, but their visibility state seems to change during the control is working, so, instead of using setVisible(false) (which will be ignored in the nearest layout), try to use a setOpacity(0.0). (I'm not sure, it will work, but it worth to try).
Also, instead of CSS using, you can apply a recursive search of scrollBars in a control structure, using a Parent.getChildrenUnmodifiable() method, and make them invisible manually.
I have a GWT application with some SimplePanel.
How can I make its border dashed?
I tried myPanel.addStyleName(Style.BorderStyle.DOTTED.getCssName());, but it didn't work.
This should work using Element#getStyle() method to update the element's Style object.
SimplePanel myPanel=new SimplePanel();
myPanel.getElement().getStyle().setBorderStyle(BorderStyle.DOTTED);
but I suggest you to keep the styling in the CSS file instead of directly applying it in Java file that is more difficult to manage and change in future mostly in case of themes.
CSS:
.dashedBorder{
border: 1px dotted black;
}
JAVA:
SimplePanel myPanel=new SimplePanel();
myPanel.setStyleName("dashedBorder");
I'm writing a simple JavaFX application, but I can't get some of the CSS styling to work.
The problem is the -fx-background-color property for my TextArea.
This is the relevant CSS:
.text-area {
-fx-font-family: Consolas;
-fx-highlight-fill: #00ff00;
-fx-highlight-text-fill: #000000;
-fx-text-fill: #00ff00;
-fx-background-color: #000000;
}
All the fields perform as expected, except -fx-background-color, which apparently does nothing. I still have the default white background. As you can see in the picture, the TextField below, which has identical CSS, but does apply the background color as expected.
Picture of my problem
Any clues?
You need to set the content:
.text-area .content{
-fx-background-color: black;
}
...
Or see this answer maybe: Transparent background of a textarea in JavaFX 8
I had the same problem: What I did:
Created a .css file called console.css with following content:
.text-area {
-fx-font-family: Consolas;
-fx-font-size: 15;
-fx-text-fill: #ffffff;
-fx-display-caret:true;
}
.text-area .content {
-fx-background-color: #000000;
}
On my scene called:
scene.getStylesheets().add(this.getClass()
.getResource("/stylesheets/console.css").toExternalForm());
Explanation:
The second part just loads the css stuff. (trivial)
The fist part (css): You have to check which property has to be applied on which part of the object. For instance: -fx-font-family is on .text-area but -fx-background-color is on .content. Understanding this concept let you understand all of the css stuff in JavaFx.
JavaFX-CSS-Docu
(recommended).
Good programming :-)
Are you using scene builder?
I tried the same css you use and everything works fine, maybe it's a bug in your version.
I tested it for text-area and text-field.
You should use -fx-control-inner-background for example for a TextArea with id=textAreaField:
#textAreaField {
-fx-control-inner-background: #000000;
-fx-text-fill: #ffffff;}
and you can for more information, see this topic:
Textarea javaFx Color
In JavaFx ,TextArea has two substuctures (Content & scrollPane) ,for each structure has all properties of TextInputControl :
text-area{ }
text-area .content { }
text-area.scroll-pane { }