Controlling the way in which Label break long strings

Anvil Q&A
1

Is there some way to control the character used as a hyphen break in long stings. I have long url which need to be displayed in a DataGrid column? For example,

 <https://example.com/this/is/a/very/very/very/longurl/which/I/need/to/break/on///rather/than/-
1 Like
2

I’d like to help but could use some clarification.

Is anvil adding a hyphen somehow?

Could you show a screenshot of the not-desired behaviour?

3

If I use a TexBox rather than a Label, I can go into the item and move around. But it is editable. If I set enable=False I can’t move around. I need the functionality like the example above where you can scroll long fixed lines.

4

04
Screenshot 2019-06-27 at 19.01.04.png1486×836 23.5 KB

5

I assume that you want to avoid that overlap.

Could you perhaps try adding some newlines with \n?

    self.label_1.text="""
<https://example.com/this/is\n/a/very/very/very/longurl/\nwhich/I/need/to/break/on///rather/\nthan/
    """

sc

6

Yes. But I don’t want to have to put the \n in programatically.

7

If I could programmatically look-up the width of a column I can break it up myself.

9

Oh okay.

self.data_grid_1.columns

returns

[{'width': '20', 'title': 'Column 1', 'id': 'KZDOMF', 'data_key': 'column_1'}, {'width': '10', 'title': 'Column 2', 'id': 'ADLDRI', 'data_key': 'column_2'}, {'width': '30', 'title': 'Column 3', 'id': 'QXAJYX', 'data_key': 'column_3'}]
11

Nope. My columns were set up programatically and only contain

{'title': 's', 'id': 's', 'data_key': 's'}

The line setting them up is as follows:

    self.sparql_result_table.columns = [{"id": h, "title": h, "data_key": h} for h in res['vars']]

where res came from the server module.

12

When you set up your columns, could you also add a width argument?

widths=[100,200,300]
cols=['a','b','c']
    
my_grid=DataGrid()
my_grid.columns = [{"id": c, "title": c, "data_key": c, 'width': w} 
                  for c, w in zip(cols, widths)]

self.content_panel.add_component(my_grid)

Now all the columns have a specified width that you can request. You could take the column that holds your long url and split it as mentioned above based on the known width.

13

Do we know before-hand what width is available to be divided between the columns? Is the measure in px or char? What happens if the width of all columns is larger than the amount available?

14

I’m not sure what the units of width are, but you could probably determine this by experimenting.

15

Hi there,

You can control line-break behaviour to a limited extent with CSS. Here’s an article I found on the subject.

Here’s some simple CSS you can add to your theme.css (in the Assets section), which prevents overflow from one column to another:

.anvil-label {
  word-break: break-word;
}

Unfortunately, CSS doesn’t allow you to customise which characters present break-points, so as to break after a / character. (I guess you could do something with unicode zero-width spaces, but this could affect the ability to copy and paste the label value, if that’s something you want to do.)

1 Like