Linebreaking of links

Question

I have a column filled with text in tabulator. The text is displayed with line breaks.

{title:"Title", field:"title", formatter:"textarea"},

When I introduce the built in URL formatter, the text in the first column does not break anymore.

  {title:"Title", field:"title", formatter:"textarea", formatter:"link", formatterParams:{target:"_blank", urlField:"source"}},

Is there a way to introduce link while keeping the linebreaks?

I don't understand your question, the code you provided is a string or it's to code in itself? If it's a code then what language is it? If it's string, can you provide a larger example? — MartinKondor, Dec 16 '19 at 12:42
What happens if you use: {title:"Title", field:"title", formatter:"textarea", formatterParams:{target:"_blank", urlField:"source"}} — Muhammad Zeeshan, Dec 16 '19 at 13:58
Then the table does not load. And if I remove the `formatter:"link"` the link is gone. — Stücke, Dec 16 '19 at 14:03
It would be helpful if you created a **[mcve]**. Just shove some example data into some example code that causes the problem. — Reinstate Monica Cellio, Dec 16 '19 at 14:04

Christian Heine · Answer 1 · 2020-01-03T04:45:51.723

3

By default, tabulator renders the cells with "white-space: nowrap" (as defined in CSS class tabulator-cell in tabulator.css).

The formatter "textarea" overrides that by manually setting "pre-wrap" on the style of the cell element: modules/format.js

Options:

Write a custom formatter (to render a link with "white-space: pre-wrap")
Add your own CSS (after tabulator.css, to make sure the css cascade works) to target links inside tabulator-cell to set "white-space: pre-wrap". This should work:
```
.tabulator-row .tabulator-cell a {
    white-space: pre-wrap;
}
```

edited Jan 03 '20 at 04:45

answered Dec 23 '19 at 02:53

Christian Heine

256
1
8

Thank you for your response. I added the code of 2 within `` behind `` but it does not linebreak the links. – Stücke Jan 02 '20 at 12:26
My bad. It's "-" instead of "_" in the CSS. Let me update this – Christian Heine Jan 03 '20 at 01:59
Here's a working example on JSBin: https://jsbin.com/fudinedowu/edit?html,css,js,output – Christian Heine Jan 03 '20 at 04:53

score 1 · Answer 2 · answered Dec 16 '19 at 14:48

http://tabulator.info/docs/4.0/format#format-height

Variable Height Formatters

By default formatters will keep their contents within the height of the current row, hiding any overflow. The only exception to this is the textarea formatter which will automatically vary its height when the column is resized so its contents does not overflow.

If you would like this functionally to appear in another type of formatter you can set the variableHeight property to true in the column definition and it will will behave in a similar way to the textarea formatter:

{title:"Name", field:"name", formatter:myCustomFormatter, variableHeight:true}

also you can not set multiple formatters at once , that is wrong:

{title:"Title", field:"title", formatter:"textarea", formatter:"link", formatterParams:{target:"_blank", urlField:"source"}}
-                              ^^^^^^^^^ overriden by ^^^^^^^^

Thank you very much for your answer! When I remove `formatter:"textarea"` and introduce `variableHeight:true` there is still no line breaking. — Stücke, Dec 16 '19 at 15:36

Linebreaking of links

2 Answers2

Variable Height Formatters

Linked