Long text in List

How-to Discussions
1

Hi,

i’m look for solution with long text in List …

file
28OFMpC6YhAN-image-1477152809110.52.32.png487×801

… exist some functional solution, how is it on this screen ?

file
mDdSDXdh9JN2-image-1477152865864.52.58.png487×801

thnx

2

https://www.fusetools.com/docs/fuse/controls/text

You can use either TextTruncation="Standard" or TextWrapping="Wrap"

3

Yes, i know about this paramater TextTruncation=“Standard” … but does not work. The text is always same with this parameter and without this parameter. :frowning:

4

Do you want to turn truncation on or off? To turn it off, do TextTruncation="None"

5

I get dynamic list of data from json source … and i need this:

Text is too long in List (my first screenshot):

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod”

And i need it automaticly make it shorter (to visible width … my second screenshot):

“Lorem ipsum dolor sit amet, consectetur …”

6

Can you provide the UX that creates the list? You might be creating a structure that prevents truncation from happening.

7

ok it is very simple … this is example with static JSON data source … but it is same with dynamic JSON source

<Page ux:Class="ListPage">
<Router ux:Dependency="router" />
<JavaScript>
var rows = [
    {
        id: 0,
        name: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
        data1: "Lakebed, Utah",
        data2: 10
    },
    {
        id: 1,
        name: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris",
        data1: "Black Hills, South Dakota",
        data2: 20
    },
    {
        id: 2,
        name: "Duis aute irure dolor",
        data1: "Bergenhagen, Norway",
        data2: 8
    },
    {
        id: 3,
        name: "Excepteur sint occaecat cupidatat",
        data1: "Moriyama, Japan",
        data2: 12
    }
];

function goToDetail(){
  // Open detail page
}
module.exports = {
	rows: rows,
    goToDetail: goToDetail
}
</JavaScript>
    <DockPanel>
        <ScrollView>
            <StackPanel>
                <Rectangle ux:Class="Separator" Height="1" Fill="#fff4" />
                <Each Items="{rows}">
                    <Separator />
                    <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToDetail}">
                        <Text Value="{name}" Margin="20" Color="White" TextTruncation="Standard" />
                    </Panel>
                </Each>
                <Separator />
            </StackPanel>
        </ScrollView>
    </DockPanel>
</Page>
8

This is the correct way to do truncated text. It is working when I export to a device (iPhone) but doesn’t appear to be working preview. Note, I’m not expecting ellipsis in preview, since I know that doesn’t work, but I was expecting it to at least be clipped. I’ll add an issue to get that fixed.