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!
Related
I have this css styling for tabpane javafx:
.tab {
-fx-background-color: #002f6c;
}
.tab-pane>*.tab-header-area>*.tab-header-background
{
-fx-background-color: -fx-outer-border, -fx-text-box-border, #002f6c;
}
.tab:selected {
-fx-background-color: #0041a0;
}
.tab-label {
-fx-text-fill: #ffffff;
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator
{
-fx-border-radius: 0px;
-fx-border-width: 0px 0px 0px 0px;
-fx-border-color: #4d1a4dff;
}
But i still can't rid of this white border near my tabs:
Can somebody help me with it?
The white border effect is because of the background color insets applied on .tab-header-background. Modifiying the code below should do the trick.
.tab-pane>*.tab-header-area>*.tab-header-background {
-fx-background-color: #002f6c;
-fx-background-insets:0;
}
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.
In every browser on every mobile device I've tried, my zoom control buttons have a light grey outline that doesn't show up on desktop browsers. I have tried a lot of css to get rid of it but nothing works. Does anyone know how to remove it?
This is my CSS for the controls, which does everything I need on desktop browsers but doesn't remove this outline sort of thing on mobile devices:
.leaflet-control-container {
box-shadow: none !important;
outline: 0 !important;
}
.leaflet-bar {
box-shadow: none;
}
.leaflet-bar a, .leaflet-bar a:hover {
background-color: #f0b034;
border: 1px solid #065428;
}
.leaflet-bar a:first-child, .leaflet-bar a:last-child {
border-radius: 0;
border-bottom: 1px solid #065428;
}
This is the live page I currently use for testing: click
In desktop browser, there is a shadow around the Zoom Control. It is defined by .leaflet-bar class (see Leaflet CSS line 209).
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}
For touch (mobile) devices, this definition is overriden by .leaflet-touch .leaflet-bar class (see line 380).
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0,0,0,0.2);
}
You should be able to remove it by overriding this border property in your CSS.
.leaflet-touch .leaflet-bar {
border: none;
}
Demo: http://jsfiddle.net/ve2huzxw/37/
how to use border spacing property in javafx ?
Like in css for html
table.ex1 {
border-collapse: separate;
border-spacing: 10px 50px;
}
How do i use border spacing in javafx?
Inside a TabPane wherer i want to put a bottom border under each tab and my css is
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-width: 4px;
-fx-border-color: transparent transparent white transparent;
}
its working and i have nice bottom border but i need some more border spacing , so someone please tell me how to do that ?
thanks in advance.
.tab:top{
-fx-background-color: transparent;
-fx-border-insets: 0 0 0 0;
-fx-border-color: white white white white ;
-fx-padding: 15px;
}
I think there is no border-spacing type property in javafx css but anyway you can do it in TabPane by -fx-padding property for tab.
Add some -fx-border-insets. Something like
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-width: 4px, 0px;
-fx-border-color: transparent transparent white transparent, transparent;
-fx-border-insets: 0px 0px 2px 0px, 0px 0px 4px 0px ;
}
Check the CSS documentation for Region for details.
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.