I have just started playing around with CSS in my JavaFX project and ran into a problem I could not solve. I have a TreeView that serves as a main menu and I wanted to get rid of any focus/unfocus borders that appear. I have managed to fixe the issue with a blue border appearing when interacting with the TreeView (focusing), completely removing it, however this white border appears every time I interact with something else.
I have tried looking online for solutions to this problem, however I could not find any. I have tried altering the CSS file in different ways featured in similar focus/unfocus problems but none of them worked.
My CSS file:
.grid-pane {
-fx-background-color: #181818;
}
.tree-view, .tree-cell {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
#mainMenu .tree-cell {
-fx-padding: 0.25em 0em 0.25em 0em;
-fx-font-size: 28px;
-fx-background-color: #181818;
}
#mainMenu .tree-cell > .tree-disclosure-node > .arrow {
-fx-background-color: #FFFFFF;
-fx-alignment: center;
}
#mainMenu .tree-cell:expanded > .tree-disclosure-node > .arrow {
-fx-background-color: #FFFFFF;
-fx-alignment: center;
}
#mainMenu .label {
-fx-text-fill: white;
}
When focused (desired outcome)
When unfocused (white border)
Sorry for the bad English, as it is not my native language.
Thank you for your support!
I found the answer just now actually. I added -fx-background-insets: 1; to tree-view css only and it no longer appears. Thank you to everyone who tried to help so far!
.tree-view {
-fx-background-insets: 1;
}
Related
The image shows what happens when a textfield is selected. It turns white although it should stay the same as the field above. Also the passwordfield shows strange icons - but thats another question.
Here the code:
.text-field {
-fx-background-color: rgba(0,0,0,0.1);
-fx-border-color: rgba(0,0,0,0.1);
-fx-background-radius:30;
-fx-border-radius:30;
-fx-min-height:45;
-fx-text-fill: #fff;
-fx-prompt-text-fill: #fff;
-fx-border-width:0px;
-fx-alignment: center;
-fx-font-size: 1.2em;
-fx-effect: null;
}
.text-field:hover,
.text-field:focused,
.text-field:selected {
-fx-background-color: rgba(0,0,0,0.1);
-fx-border-color: rgba(0,0,0,0.1);
-fx-background-radius:30;
-fx-border-radius:30;
-fx-min-height:45;
-fx-text-fill: #fff;
-fx-prompt-text-fill: #fff;
-fx-border-width:0px;
-fx-alignment: center;
-fx-font-size: 1.2em;
-fx-effect: null;
}
Is there anything wrong with my css or is it a bug maybe? Css is showing properly when i launch the app on desktop. But deployed the texfields are white.
Thanks for any help.
I am currently using CSS to create a dark theme for an application I created. I am having issue creating a dark themed scrollbar, which appears inside a TreeTableView. Most of the scrollbar looks correct, but there is a small extra header created that isn't styled. Here is a picture, of my progress below:
The TreeTableView is very simple. It has two TreeTableColumns.
My current css relating to the table is below:
.tree-table-view
{
-fx-background-color: #404040;
}
.tree-table-view .scroll-bar
{
-fx-background-color: transparent;
}
.tree-table-view *.column-header-background *.show-hide-columns-button
{
-fx-background-color: #404040;
}
.tree-table-column
{
-fx-background-color: #404040;
-fx-border-color: #2d862d;
-fx-border-width: 0px 1px 0px 0px;
}
.tree-table-column .label
{
-fx-border-color: #2d862d;
-fx-border-insets: 0px 5px 0px 5px;
-fx-border-width: 0px 0px 1px 0px;
}
.tree-table-cell
{
-fx-text-fill: #e6e6e6;
-fx-padding: 0px 5px 0px 5px;
}
.tree-table-row-cell .arrow
{
-fx-background-color: #2d862d;
}
Does anyone know what css class I can use to make the white 'extra header' in the top-left corner have a black background? I would really appreciate it.
Any help will be greatly appreciated. Thanks!
.tree-table-view .filler {
}
Was the selector I needed. Thanks JNS!
i'd like to customize the appearance of a Menu in my JavaFX8 application. How can i get rid or style the color of the 'white outline' shown in the following screenshot?
i tryed:
#MainMenuBar
{
-fx-text-fill: #bbbbbb;
-fx-background-color: #3c3f41;
-fx-border-color: #555555;
-fx-border-style: solid;
-fx-border-width: 0 0 1px 0;
}
.menu-item
{
-fx-background-color: #3c3f41;
-fx-text-fill: #bbbbbb;
-fx-border-color: transparent;
}
but it still there is this white otuline.
Thx,
seems you have to also style the 'context-menu'.
it worked by adding:
.context-menu
{
-fx-background-color: #3c3f41;
-fx-border-color: #555555;
-fx-border-style: solid;
-fx-border-width: 1px;
}
This and this answers on SO helped me to figure it out, thanks all.
I am trying to make a scrollpane with a scrollbar that has transparent (or at least solid) background by styling it with css in javafx 2.2.3.
.scroll-pane .track{-fx-opacity: 0;}
.scroll-pane .scroll-bar{-fx-base: transparent;}
Strangely, the code above makes scrollbar black. Giving -fx-base any value with alfa does that.
Background-color has no efect at all...
What am I missing?
Here is a sample which displays a scroll bar with a transparent background.
The sample includes some extra program logic to only show visual feedback on the scrollbar when the user hovers over the scrollbar - you may or may not need that.
The css related to the scrollbar in the sample is:
.address .scroll-pane {
-fx-background-color: transparent;
}
.address .scroll-bar .increment-button {
visibility: hidden;
}
.address .scroll-bar .decrement-button {
visibility: hidden;
}
.address .scroll-bar:vertical {
-fx-background-color: transparent;
}
.address .scroll-bar:vertical .track-background {
visibility: hidden;
}
.address .scroll-bar:vertical .track {
visibility: hidden;
}
.address .hide-thumb .scroll-bar:vertical .thumb {
-fx-background-color: transparent;
}
Where the scroll bar being made transparent has the additional custom style class of address assigned to it.
I determined the css to use by studying the scroll-bar section of the default JavaFX 2.2 css stylesheet caspian.css.
Output of the sample is:
I have built a navigation list for a client and they opted to use the [Oswald]() font-face.
Now when the user scrolls over the link a navigation arrow will pop up to the side indicating which link is currently click, it is NOT supposed to turn orange upon hovering. I have removed any javascript and the fontface entirely and still can not remove the problem.
Here is a screenshot of the issue http://cl.ly/043a0q0o0Q392q2m1k20
My CSS (SASS) is as follows:
#leftnav {
width: 205px;
float: left;
ul {
li {
border: 1px solid #fff;
border-top: 0px;
background: #cc5816;
padding: 3px 10px;
#include gradient($top_color: #d86c07, $bottom_color: #bb5e06);
a {
position: relative;
font-family: $main_bold_font;
font-size: 16pt;
color: #fff;
text-decoration: none;
text-shadow: $text_shadow;
}
a:hover { #extend a; }
a:visited { #extend a; }
}
}
}
Any Ideas?
I dont know for sure if this solves the problem. But, as stated here, I would recommend to change the order of :hover and :visited to be :visited and :hover. Maybe it helps to analyse the compiled css.