Customize row height

Features
1

Your interface in 5.0 is nice, simple and clear. Thanks! Yet, some may wish to display more data on the screen (obviously, including myself), which is possible as the design is very simple. It would be awesome to have an option in the Preferences/ui to tune (decrease, in my case) the row height for the list of entries.

2 Likes
2

Hi, +1 for the above feature request.
I wonder if it is possible to customize row height by importing a suitable custom .css theme. If so, which is the syntax?

3

Hi
yes with a custom theme it’s possible:
you can copy over the Base.css from here, rename it and add it as custom theme in the preferences

https://docs.jabref.org/advanced/custom-themes

And then add simply add the following to your custom theme css file:

.table-view .cell{
	 -fx-cell-size: 100; //default is 24
}

If you need/want to style other components: JavaFX CSS Reference Guide

With 100 this looks then like this:

grafik
grafik1572Ă—1206 123 KB

1 Like
4

Thanks. It worked (it was necessary to reduce row padding as well).
Just one more question: Is it possible (with css or other) to reduce the height of the top menu row (and possibly row height in the drop down menus) as well as toolbar with icons?
Just trying to create a compact appearance (wider field of view) in my screen…
Thanks in advance

5

Hi,

this is probably also possible. The best way to identify the correct CSS selector is to start JabRef and then to start scenic view It helps you to identify the css styles etc.

The toolbar is probably what you are looking for ( .mainToolbar) in the Base.css file.

6

Hi, @MacGyver, in case you can still read. Please, would you mind writing the exact code you used?
I’m having trouble understanding how to use padding: the entries become unaligned with the header.

Also if anybody knows how to make also the groups side panel more compact, I would be very grateful.

Thank you

7

Hi @Galileji there is a long time since I tweaked the base.css to do this and I don’t remember exactly the details. I give you all the corresponding code to choose accordingly:

.table-view .cell{
-fx-cell-size: 19; //default is 24
-fx-padding: -0,0,0,0;
}

.tree-table-view .cell{
-fx-cell-size: 24;
-fx-padding: 0 0 0 0;
}

.mainToolbar {
/* -fx-background-color: -jr-toolbar; /
/ -fx-border-color: derive(-jr-toolbar, 50%); /
/ -fx-border-width: 0; */
-fx-pref-height: 30;
-fx-min-height: 30;
-fx-max-height: 30;
-fx-padding: 0
}

.table-view {
-fx-table-cell-border-color: #cccccc;
-fx-border-width: 1;
-fx-padding: 0 0 0 0;
-fx-border-insets: 0;
}

.mainMenu {
-fx-background-color: -jr-menu-background;
-fx-background-insets: 0;
-fx-pref-height: 30;
-fx-min-height: 30;
-fx-padding: -8 0 0 0;
}

.column-header-background {
-fx-pref-height: 30;
-fx-min-height: 30;
}

.tab-header-area {
-fx-pref-height: 30;
-fx-min-height: 30;
}

.headers-region {
-fx-pref-height: 30;
-fx-min-height: 30;
}

.label{
-fx-font-weight: normal;
-fx-text-inner-color: #50618f;
}

Please let us know if it works for you

2 Likes
8

Thank you very much @MacGyver. Starting from your code I could achieve a satisfying result for me.

image_60
image_60845Ă—431 29.8 KB

Additionally:

  • I added a little space on top of tabs to separate that from the search bar.
  • I aligned the column headers (Author, Year, etc.) with the content of the cells.

The code I used is this. It may be useful for other people

.table-view .cell{
    -fx-cell-size: 30; /* default is 24 */
    -fx-padding: 1 0 0 0; /* top, right, bottom, and left */
    }
.tree-table-view .cell{
    -fx-cell-size: 24;
    -fx-padding: 0 0 0 0;
}
.mainToolbar {
    -fx-pref-height: 30;
    -fx-min-height: 30;
    -fx-max-height: 30;
    -fx-padding: 0
}
.table-view {
    -fx-table-cell-border-color: #444444;
    -fx-border-width: 1;
    -fx-padding: 0 0 0 0;
    -fx-border-insets: 0;
}
.mainMenu {
    -fx-background-color: -jr-menu-background;
    -fx-background-insets: 0;
    -fx-pref-height: 30;
    -fx-min-height: 30;
    -fx-padding: -8 0 0 0; 
}
.column-header-background {
    -fx-pref-height: 35;
    -fx-min-height: 35;
}
.tab-header-area {
    -fx-pref-height: 40;
    -fx-min-height: 30;
}
.headers-region {
    -fx-pref-height: 35;
    -fx-min-height: 35;
}
.table-view .column-header > .label {
    -fx-padding: 0 0 0 0;
}
1 Like
9

One thing I could not manage to do is reducing the height of the elements in the groups panel on the left. As a matter of fact, as soon as I go from “-fx-cell-size: 24;” to “-fx-cell-size: 23;” in .tree-table-view .cell I get this (see image).
Please fo you have any idea on how to properly reduce the cell height for the panel on the left? Thank you in any case
image_61

(I had to make a new message for this because the forum won’t let me upload two pictures in the same message)