# Line wrap in entry table

**URL:** <https://discourse.jabref.org/t/line-wrap-in-entry-table/4009>\
**Category:** Features\
**Tags:** ui\
**Created:** [October 9, 2023, 1:19pm UTC](https://discourse.jabref.org/t/line-wrap-in-entry-table/4009 "2023-10-09T13:19:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryan-carpenter](https://avatars.discourse-cdn.com/v4/letter/r/b487fb/32.png) [@ryan-carpenter](https://discourse.jabref.org/u/ryan-carpenter)\
**Post date:** [October 9, 2023, 1:19pm UTC](https://discourse.jabref.org/t/line-wrap-in-entry-table/4009/1 "2023-10-09T13:19:07Z")

</div>

I would like to increase the row height of the entry table as discussed [here](https://discourse.jabref.org/t/customize-row-height/1994) _and_ enable overflow wrapping for a better view of entry titles (i.e., increase row height and show two or three lines of text per row).

I think this is possible with the [overflow-wrap CSS property](https://www.w3schools.com/cssref/css3_pr_overflow-wrap.php) but I don’t know where to add it to the theme file or if there is a different property to use with JavaFX.

```auto
overflow-wrap: normal|anywhere|break-word|initial|inherit;

```

I also notice that line height in the default theme is expressed in -em `-fx-cell-size: 4.0em;` rather than in pixels as [previously posted](https://discourse.jabref.org/t/customize-row-height/1994). I presume that a different multiplier here would work to change the row height.

Line wrapping and variable row height would also be nice to have in the UI, but I will start with a theme file since I am not a developer. Would someone please share advice on how to make the change?

---

<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:** [October 9, 2023, 3:00pm UTC](https://discourse.jabref.org/t/line-wrap-in-entry-table/4009/2 "2023-10-09T15:00:18Z")

</div>

Hi,

that sounds interesting. You can play around with creating a new theme based on the old one:  
Pixel vs em: em is the prefered unit because it’s relative to the font size in contrast to pixel

> **[Custom JabRef Themes](https://themes.jabref.org/)**
>
> Custom themes for JabRef

respectively [https://docs.jabref.org/advanced/custom-themes](https://docs.jabref.org/advanced/custom-themes)

---

<div class="post-metadata">

**Author:** ![ryan-carpenter](https://avatars.discourse-cdn.com/v4/letter/r/b487fb/32.png) [@ryan-carpenter](https://discourse.jabref.org/u/ryan-carpenter)\
**Post date:** [October 9, 2023, 3:25pm UTC](https://discourse.jabref.org/t/line-wrap-in-entry-table/4009/3 "2023-10-09T15:25:19Z")

</div>

I have copied the original CSS. I am trying to figure out where in the file to put the `overflow-wrap` property, which I think is supposed to be `-fx-wrap-text`. Maybe in the `.table-cell` section?

The previous topic showed this

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

```

~~I think this is the section of interest where I might add `-fx-wrap-text: true`~~

~~.table-cell,~~  
~~.tree-table-cell,~~  
~~.table-cell .glyph-icon,~~  
~~.tree-table-cell .glyph-icon {~~  
~~-fx-padding: 0.5em 1em 0.5em 1em;~~  
~~-fx-cell-size: 4.0em;~~  
~~-fx-text-fill: -fx-text-background-color;~~  
~~-fx-fill: -fx-text-background-color;~~  
}

Messing around with [Scenic View](https://github.com/JonathanGiles/scenic-view#build-status) is something that would have to wait for another time.

Edit above: incorrect guess. `table-view` not `table-cell`

**Solution**

I added the `.table-view` section according to the previous instructions, plus the wrapping property. The location of this addition to the default theme does not matter as this new properties do not conflict with any existing styles.

```auto
.table-view .cell{
    -fx-cell-size: 100;
    -fx-wrap-text: true
}

```

Success!

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/jabref/original/2X/1/11b82e1804e0cfcb9352b901859b241d91eef5e7.png)

Also works with `em` and adapts as expected with changes in font size. A value of 5.6 was the first .1 increment that fit three lines per row

```auto
.table-view .cell{
    -fx-cell-size: 5.6em;
    -fx-wrap-text: true
}

```

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

---

<div class="post-metadata">

**Author:** ![ryan-carpenter](https://avatars.discourse-cdn.com/v4/letter/r/b487fb/32.png) [@ryan-carpenter](https://discourse.jabref.org/u/ryan-carpenter)\
**Post date:** [October 9, 2023, 3:27pm UTC](https://discourse.jabref.org/t/line-wrap-in-entry-table/4009/4 "2023-10-09T15:27:37Z")

</div>

> [@Siedlerchr](#):
>
> Pixel vs em: em is the prefered unit because it’s relative to the font size in contrast to pixel

Did you mean the other way around? Pixel is absolute and em is relative to font size.

---

<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:** [October 9, 2023, 7:39pm UTC](https://discourse.jabref.org/t/line-wrap-in-entry-table/4009/5 "2023-10-09T19:39:34Z")

</div>

em is the prefered unit because it’s relative to the font size in contrast to pixe

> Did you mean the other way around? Pixel is absolute and em is relative to font size.

All fine 😉

Thanks for the cool css solution!  
Feel free to add your theme to [https://themes.jabref.org/](https://themes.jabref.org/)

---

<div class="post-metadata">

**Author:** ![ryan-carpenter](https://avatars.discourse-cdn.com/v4/letter/r/b487fb/32.png) [@ryan-carpenter](https://discourse.jabref.org/u/ryan-carpenter)\
**Post date:** [October 10, 2023, 3:19pm UTC](https://discourse.jabref.org/t/line-wrap-in-entry-table/4009/6 "2023-10-10T15:19:43Z")

</div>

I meant the remark about pixel vs. em as a question, not as a correction. I think there might be situations where pixels are the preferred (or necessary) approach. 🙂

Em values seem to be working well with JabRef’s entry table. I got the best three-line view from `-fx-cell-size: 5.6em` and the best two-line view from `-fx-cell-size: 4.3em`.

I think this is a feature that merits consideration for inclusion in the GUI. I made these _rough examples_ of row-height icons used by other applications that have implemented this.

Click or hover over row-height icon  
 ![row-height](https://canada1.discourse-cdn.com/flex030/uploads/jabref/original/2X/5/5ba30d58ea51b565f74f71ca97073238d105a6af.png)

Choose small, medium, or large  
 ![row-height-s](https://canada1.discourse-cdn.com/flex030/uploads/jabref/original/2X/7/73f54516e662932aabce81163fc53168f2b00c4e.png) ![row-height-m](https://canada1.discourse-cdn.com/flex030/uploads/jabref/original/2X/e/e42219876dcc864020c05d1ecea2e6b8b74fa462.png) ![row-height-l](https://canada1.discourse-cdn.com/flex030/uploads/jabref/original/2X/8/884183a748cd5f9c29ffca87cc3a4978c1fc8880.png)