Data Grid Text Wrap

Anvil Q&A
1

The data in the last column in my data grid repeating panel is too long for the column width, so it’s getting truncated.

How can I make it wrap or split to the next line?

I’ve tried without a control (ie just accepting the default binding) and I’ve tried with a label. It will probably work with a text area but that will look awful.

2

CSS to the rescue - here’s an app where I’ve created a Role called text-wrap.

https://anvil.works/build#clone:R3FJ3VCJJRVCX6F4=XSGLJ7YHIXV46VB4RQRR6E7Y

image
image.png1009×362 27.8 KB

It’s got a CSS rule that inserts breaks into long words rather than expanding the Label’s span element to fit them in unbroken:

.anvil-role-text-wrap > .label-text, .anvil-role-text-wrap .link-text {
  word-break: break-all;
}

(I’ve added this to theme.css in Assets)

07
Screen Shot 2019-08-28 at 13.56.07.png1167×342 31.2 KB

Here’s the result

18
Screen Shot 2019-04-24 at 11.24.18.png1016×368 21 KB

Breaking in different ways

There are a few CSS rules that set different word wrapping behaviours, so you can experiment to get the text to break in different places. NB: Check the compatibility tables, not all options are univerally supported.

For example, if you do

.anvil-role-text-wrap > .label-text, .anvil-role-text-wrap .link-text {
  overflow-wrap: anywhere; /* Only supported by FF! */
}

Then FireFox breaks on spaces if it can, keeping words in tact:

image
image.png999×360 20.8 KB

(You can get the same effect in Chrome using word-break: break-word, but beware: MDN says that’s deprecated.)

Applying it to all Labels and Links

If you want to apply it to all Labels and Links rather than using a Role, you can use this CSS selector:

.anvil-label>.label-text, a>.link-text {
  word-break: break-all;
}
4 Likes
3

Thank you, kind sir.

I think my brain is on strike this week. I’m missing even the most obvious solutions.

4

@shaun

The wrapped text in your app does not appear to wrap anymore. When I run it I get:

sc

I have tried adding the roles/CSS to my own app and it fails to wrap as well.

Has something changed internally that would prevent the CSS and roles from working as described above?

5

Just an idea, but maybe add

!important

to the css, in case it’s being overridden?

1 Like
6

@alcampopiano sadly, overflow-wrap: anywhere is only supported by FireFox.

I recommend using:

  word-break: break-all;

This is compatible with all browsers. I’ll update my example to use this instead.

(To overcomplicate matters: word-break: break-all doesn’t give you the ‘break between words if possible’ behaviour, so you could combine it with overflow-wrap: anywhere and word-break: break-word if you wanted that behaviour on Chrome and FireFox. Unfortunately, Edge doesn’t support that behaviour at all! So you’ll need this to get as much ‘breaking between words’ as possible:

  word-break: break-all;   /* Fallback for Edge */
  word-break: break-word;  /* Wrap on spaces in Chrome */
  overflow-wrap: anywhere; /* Recommended solution for FF */

Luckily, this is only a problem at all where you have elements that contain a really long word as well as some shorter words.)

1 Like
7

Thanks Shaun. That is good to know and your suggestion works.

1 Like