Listview word wrap issue

I am sure this is just ignorance on my part but I cannot figure this out. I have a project that contains a normal Listview list. Everything is working fine except for one part. I can add and remove elements in the list just fine. Everything displays as expected except when I am in the Main Text Detail (Horizontal) layout. It works fine in (Verticle) and Main Text only.. but when I have a long element in Horizontal the text does not wrap.. it just goes off the screen and I cant fix it.

I have tried setting the Listview width to Automatic, Fill Parent, and even some percentages but nothing works. The screen is NOT scrollable, I saw a warning about that in the documentation on Listview,

Any ideas?

1 Like

The only other thing I can think to add is the text in the MAIN text field seems to wrap just fine, only the DETAIL text does not.

1 Like

Hello Carl

Really don't follow your description - can you post a screenshot?

1 Like

Let's see if this helps explain my dilemma..

It works on the computer where I took the screenshot from, but not on my phone. It works in every Listview Layout except Horizontal, the one that I am wanting to use.

1 Like

The only way to do it, (that I can find), if you want to have a horizontal listview, is like this:

image

Designer

image

Device

image

Maybe @Susan_Lane can comment on this....?

2 Likes

Here are some screenshots from my phone. The first one where the word wrap works is while the app is in Verticle Layout and the second one where it dos not is Horizontal.. the one I need.

example works

example No Work

In the second screen shot there is more text so dont let the one line fool you.. "I am on Horizontal Layout now and the text goes off the screen.." is what it should show

I did not think of changing the Orientation to Horizontal.. I will try it and see if it works.. but man I wish I didn't have to do that.. oh well.. lets see what happen when I try.

1 Like

I'm not completely clear on the problem. Let me try to repeat.

When using the MainText,DetailText(Horizonal) layout, you would expect both the Main Text and the Detail Text to word-wrap in separate columns for each element when the text is too long to be displayed on one line.

In your app, the Detail Text is NOT word-wrapping on your phone in this layout.

Is that correct?

It's possible this is a bug. I'll take a look.

1 Like

That is my understanding and what I see from testing, and what the OP (original poster) is finding.

Thanks for coming back so quickly Susan :wink:

3 Likes

Hi Susan, I believe you understand this correctly. Two columns, one line .. in Horizontal mode it does not word wrap for me. In Vertical mode, its two line one column each (i think?) and it works fine. I did post some screen shots from my phone to help show, I hope this makes sense.

1 Like

OK. Confirmed that the behavior you were expecting is how it should work. I'll see what I can do.

1 Like

A long main text (which wraps) also seems to wipe out any details text when using Main text,Details text(horizontal)

1 Like

I dont think thats what I expected .. I expected the text to wrap like in this example. I can cross columns like the gold text does while in (Verticle) layout..

example works

..but while in Horizontal the gold text just goes off the screen. No word wrap.

I did not check a long text in the Main Text to see if it behaves the same way. My data for Main Text is usually only one word. Detail is where I found the problem.

1 Like

I'm not sure I follow.

The intended behavior in a horizontal layout is the 4th row of your Designer screenshot at Listview word wrap issue

1 Like

No, its not .. but the more I think about it I think I am asking for something AI2 is not designed to do.

In a really long line of text I would prefer to have my text start off with the Main text followed by the Detail, like the Horizontal does. If the Detail text is too long for the screen I would prefer that it wraps just like the text does while in Vertical mode, finishing itself on a new line directly beneath the line above it..

I would prefer it to act just like the Vertical does but would prefer the Main text to start off the line just in front of the Detail of text like Horizontal, having the Main and Detail on the same line.

I do not know if this is how the Layouts were intended or not and am starting to think they were not. I just saw your reply above and see that I was right, I am asking for something different. Thats ok, I appreciate you time and thanks!

1 Like

Yes, it works in the designer but not in companion

1 Like

Hmm. You're right. That's not behavior we designed for the horizontal layout.

That sounds so similar to the vertical layout. That really doesn't work for your purposes?

1 Like

Hello Carl

I think what you are asking for will be very hard to achieve but not impossible. Sounds as though Susan can in the first instance fix the Horizontal Detail Text word wrapping and that may have to suffice for now.

How does the List text get to be in the App? Is it static (does not change) or dynamic (App User supplies own text)?

I ask because HTML Tables are very flexible, and App Inventor can display them via a WebView component (no internet required).

1 Like

OK so I am interested.. the data is dynamic and is entered by various users of the app. Like a chat room.

The Main Text Detail Text (Vertical) layout works for me, I just prefer the formating of the Horizontal version better.

I know my around HTML somewhat.. but haven't used the WebView component any. I guess I need to read up on that one.. If you care to point me in the right direction I will be happy to take a crack at it.

1 Like

The WebView component is simply a cut-down version of a Browser. It can display whole pages found on the internet but it is not compatible with everything the internet uses to describe web pages, only HTML5 + CSS (best to have the CSS within the HTML file).

To make a dynamic HTML Table file in your App involves using four Blocks Lists, fixed header and footer Lists plus a dynamic List for the table and finally a whole document List. The three are combined into the one and App Inventor's list decoration removed. The resulting HTML file is saved. It can be the WebView component's home page, so whenever the file is saved, a simple Viewer refresh displays the new data.

There are however problems with App Inventor's file save/read in the current release (changed massively to comply with Google's security measures for Android 11). Should be fixed in the next release patch, coming soon.

3 Likes