# Customize row height

**URL:** <https://discourse.jabref.org/t/customize-row-height/1994>\
**Category:** Features\
**Tags:** ui\
**Created:** [April 12, 2020, 7:40am UTC](https://discourse.jabref.org/t/customize-row-height/1994 "2020-04-12T07:40:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![olivierfruchart](https://avatars.discourse-cdn.com/v4/letter/o/8baadc/32.png) [@olivierfruchart](https://discourse.jabref.org/u/olivierfruchart)\
**Post date:** [April 12, 2020, 7:40am UTC](https://discourse.jabref.org/t/customize-row-height/1994/1 "2020-04-12T07:40:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MacGyver](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/macgyver/32/845_2.png) [@MacGyver](https://discourse.jabref.org/u/MacGyver)\
**Post date:** [January 16, 2021, 4:47pm UTC](https://discourse.jabref.org/t/customize-row-height/1994/2 "2021-01-16T16:47:09Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Siedlerchr](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/siedlerchr/32/216_2.png) [@Siedlerchr](https://discourse.jabref.org/u/Siedlerchr)\
**Post date:** [January 16, 2021, 5:30pm UTC](https://discourse.jabref.org/t/customize-row-height/1994/3 "2021-01-16T17:30:51Z")

</div>

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](https://docs.jabref.org/advanced/custom-themes)

> <https://github.com/JabRef/jabref/blob/master/src/main/java/org/jabref/gui/Base.css>

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](https://openjfx.io/javadoc/14/javafx.graphics/javafx/scene/doc-files/cssref.html#cell)

With 100 this looks then like this:

 ![grafik](https://canada1.discourse-cdn.com/flex030/uploads/jabref/original/1X/f101fbe03b049fbd6882e7c9d058743d06e2c1f5.png)

---

<div class="post-metadata">

**Author:** ![MacGyver](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/macgyver/32/845_2.png) [@MacGyver](https://discourse.jabref.org/u/MacGyver)\
**Post date:** [January 18, 2021, 12:49pm UTC](https://discourse.jabref.org/t/customize-row-height/1994/4 "2021-01-18T12:49:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Siedlerchr](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/siedlerchr/32/216_2.png) [@Siedlerchr](https://discourse.jabref.org/u/Siedlerchr)\
**Post date:** [January 18, 2021, 5:56pm UTC](https://discourse.jabref.org/t/customize-row-height/1994/5 "2021-01-18T17:56:30Z")

</div>

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](https://github.com/JonathanGiles/scenic-view#build-status) It helps you to identify the css styles etc.

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

---

<div class="post-metadata">

**Author:** ![Galileji](https://avatars.discourse-cdn.com/v4/letter/g/54ee81/32.png) [@Galileji](https://discourse.jabref.org/u/Galileji)\
**Post date:** [September 27, 2022, 8:56pm UTC](https://discourse.jabref.org/t/customize-row-height/1994/6 "2022-09-27T20:56:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MacGyver](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.jabref.org/macgyver/32/845_2.png) [@MacGyver](https://discourse.jabref.org/u/MacGyver)\
**Post date:** [September 28, 2022, 6:36am UTC](https://discourse.jabref.org/t/customize-row-height/1994/7 "2022-09-28T06:36:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Galileji](https://avatars.discourse-cdn.com/v4/letter/g/54ee81/32.png) [@Galileji](https://discourse.jabref.org/u/Galileji)\
**Post date:** [October 4, 2022, 6:24pm UTC](https://discourse.jabref.org/t/customize-row-height/1994/8 "2022-10-04T18:24:45Z")

</div>

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

 ![image_60](https://canada1.discourse-cdn.com/flex030/uploads/jabref/original/2X/9/96d3c640827c83aedf46557a595cdc72dc636705.png)

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

```auto
.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;
}

```

---

<div class="post-metadata">

**Author:** ![Galileji](https://avatars.discourse-cdn.com/v4/letter/g/54ee81/32.png) [@Galileji](https://discourse.jabref.org/u/Galileji)\
**Post date:** [October 4, 2022, 6:25pm UTC](https://discourse.jabref.org/t/customize-row-height/1994/9 "2022-10-04T18:25:56Z")

</div>

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](https://canada1.discourse-cdn.com/flex030/uploads/jabref/original/2X/a/ad23e13a4c196bb2142b92ff0fca7b56cc284b74.png)

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