# Trouble with multiline text in iOS preview

**URL:** <https://forums.fusetools.com/t/trouble-with-multiline-text-in-ios-preview/548>\
**Category:** Bug Reports\
**Created:** [February 12, 2016, 6:03pm UTC](https://forums.fusetools.com/t/trouble-with-multiline-text-in-ios-preview/548 "2016-02-12T18:03:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![till](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/till/32/472_2.png) [@till](https://forums.fusetools.com/u/till)\
**Post date:** [February 12, 2016, 6:03pm UTC](https://forums.fusetools.com/t/trouble-with-multiline-text-in-ios-preview/548/1 "2016-02-12T18:03:19Z")

</div>

Hey there,

i’m having trouble with my **Text** elements when previewing my app on my iPhone. While in local preview everything works as expected, the texts are truncated to the first line on iOS preview. I don’t have any data on Android for lack of a device.

Fun fact: Hard-coded linebreaks totally produce a new line.

At first i thought it might be becaus i used the ux:Property to fill the **Text** elements, but i also created a test case, where i reintegrated the Components.

Then i tried to disable the data-binding, putting some text directly into a text node, but this also did not help.

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/brSCmoAWOyS5-legacy-files-37qNDk6n7sBRVEfZ-S7zZ3hjgflRZOIgi5_ktYYVA.jpg)

```auto
<App Theme="Basic">

    <JavaScript>
        var data = [
        {
            "id": "56b08badeaa8e8895b8b4567",
            "lang": "",
            "body": "Testmessage blubb \n huiuiui",
            "status": "new",
            "created": "2016-02-02 11:57:49",
            "user": {
                "id": "56afbf92eaa8e836578b4567",
                "name": "User 01",
                "status": "new",
                "lang": ""
            }
        },
            {
            "id": "56afbf92eaa8e836578b4568",
            "lang": "",
            "body": "Testmessage test blubb \n huiuiui",
            "status": "new",
            "created": "2016-02-01 21:26:58",
            "user": {
                "id": "56afbf92eaa8e836578b4567",
                "name": "User 01",
                "status": "new",
                "lang": ""
            },
            "answers": [
            {
                "id": "56b08c63eaa8e88d5b8b4567",
                "lang": "",
                "body": "Meine tolle Antwort",
                "status": "new",
                "created": "2016-02-02 12:00:51",
                "user": {
                    "id": "56afbf71eaa8e858538b4567",
                    "name": "User 02",
                    "status": "new",
                    "lang": "",
                    "karma": 0,
                    "avatar": "ugc/avatars/dummy.jpg",
                    "role": "feuser"
                }
                },
                {
                    "id": "56b08c69eaa8e857538b4567",
                    "lang": "",
                    "body": "Meine tolle Antwort 2",
                    "status": "new",
                    "created": "2016-02-02 12:00:57",
                    "user": {
                        "id": "56afbf71eaa8e858538b4567",
                        "name": "User 02",
                        "status": "new",
                        "lang": "",
                        "karma": 0,
                        "avatar": "ugc/avatars/dummy.jpg",
                        "role": "feuser"
                    }
                }
            ]
        },
        {
            "id": "56bc765aeaa8e8fb078b4568",
            "lang": "",
            "body": "Asking some things. Don't know if i will receive an answer. But thought, might well give it a try.",
            "status": "new",
            "created": "2016-02-11 12:54:02",
            "user": {
                "id": "56bc765aeaa8e8fb078b4567",
                "name": "User 03",
                "status": "new",
                "lang": ""
            }
        },
        {
            "id": "56bdb72beaa8e806088b4567",
            "lang": "",
            "body": "Was ist das denn für ein Schmu?",
            "status": "new",
            "created": "2016-02-12 11:42:51",
            "user": {
                "id": "56afbf92eaa8e836578b4567",
                "name": "User 01",
                "status": "new",
                "lang": ""
            }
        }];

        module.exports =
        {
            data : data
        }
    </JavaScript>

    <Panel>

        <Text ux:Class="QuestionName" FontSize="14" TextColor="#999999" Alignment="Left" />
        <Text ux:Class="QuestionDate" FontSize="14" TextColor="#999999" Alignment="Right" />

        <Panel ux:Class="QuestionCopytext" ux:Name="self">
            <string ux:Property="Text"/>
            <Text FontSize="18" TextColor="#ffffff" TextWrapping="Wrap" Value="{Property self.Text}" Padding="16,12,16,12" Alignment="CenterLeft" />
            <!-- <Rectangle Layer="Background" CornerRadius="5,5,0,0" Fill="AidviceBlue" /> -->
            <Rectangle Layer="Background" CornerRadius="5,5,0,0" Fill="#88CFED" />
        </Panel>

        <Panel ux:Class="QuestionVeto" ux:Name="self" Height="48">
            <string ux:Property="Text"/>
            <Text FontSize="18" TextColor="#ffffff" TextWrapping="Wrap" Value="{Property self.Text}" TextAlignment="Center" Padding="16,12,16,16"/>
            <Rectangle Fill="#ffffff" Height="1" Y="0"/> <!-- <Rectangle Layer="Background" CornerRadius="0,0,5,5" Fill="AidviceBlue" Opacity="0.75"/> -->
            <Rectangle Layer="Background" CornerRadius="0,0,5,5" Fill="#88CFED" Opacity="0.75"/>
        </Panel>

        <Text ux:Class="AnswerName" FontSize="14" TextColor="#999999" Alignment="Left" />
        <Text ux:Class="AnswerDate" FontSize="14" TextColor="#999999" Alignment="Right" />

        <Panel ux:Class="AnswerCopytext" ux:Name="self">
            <string ux:Property="Text"/>
            <Text FontSize="18" TextColor="#ffffff" TextWrapping="Wrap" Value="{Property self.Text}" Padding="16,12,16,12" Alignment="CenterLeft" />
            <!-- <Rectangle Layer="Background" CornerRadius="5,5,0,0" Fill="AidviceFuchsia" /> -->
            <Rectangle Layer="Background" CornerRadius="5,5,0,0" Fill="#DC3D5F" />
        </Panel>

        <Panel ux:Class="AnswerVeto" ux:Name="self" Height="48">
            <string ux:Property="Text"/>
            <Text FontSize="18" TextColor="#ffffff" TextWrapping="Wrap" Value="{Property self.Text}" TextAlignment="Center" Padding="16,12,16,16"/>
            <Rectangle Fill="#ffffff" Height="1" Y="0"/>
            <!-- <Rectangle Layer="Background" CornerRadius="0,0,0,5" Fill="AidviceFuchsia" Opacity="0.75"/> -->
            <Rectangle Layer="Background" CornerRadius="0,0,0,5" Fill="#DC3D5F" Opacity="0.75"/>
        </Panel>

        <Panel ux:Class="AnswerApprove" ux:Name="self" Height="48">
            <string ux:Property="Text"/>
            <Text FontSize="18" TextColor="#ffffff" TextWrapping="Wrap" Value="{Property self.Text}" TextAlignment="Center" Padding="16,12,16,16"/>
            <Rectangle Fill="#ffffff" Height="1" Y="0"/>
            <Rectangle Fill="#ffffff" Width="1" X="0"/> <!-- <Rectangle Layer="Background" CornerRadius="0,0,5,0" Fill="AidviceFuchsia" Opacity="0.75"/> -->
            <Rectangle Layer="Background" CornerRadius="0,0,5,0" Fill="#DC3D5F" Opacity="0.75"/>
        </Panel>

        <ScrollView ux:Name="Questions">

            <StackPanel Padding="24,64,24,64">

                <Each Items="{data}">
                    <StackPanel Orientation="Vertical">

                        <!-- THE QUESTION ITSELF -->
                        <StackPanel Margin="0,0,64,24" Orientation="Vertical">
                            <Grid ColumnCount="2" Margin="0,0,0,6"> <QuestionName Value="{user.name}"/>
                                <QuestionDate Value="{created}"/>
                            </Grid>
                            <QuestionCopytext Text="{body}" />
                            <QuestionVeto Text="Report">
                                <Clicked>
                                    <Callback Handler="{reportQuestion}"/>
                                </Clicked>
                            </QuestionVeto>
                        </StackPanel>

                        <!-- EXISTING ANSWERS -->
                        <StackPanel Orientation="Vertical">
                            <Each Items="{answers}">
                                <StackPanel Orientation="Vertical" Margin="0,0,0,24">

                                    <Panel Margin="64,0,0,0">
                                        <Grid ColumnCount="2" Margin="0,0,0,6"> <AnswerName Value="{user.name}"/>
                                            <AnswerDate Value="{created}"/>
                                        </Grid>
                                    </Panel>
                                    <Panel>
                                        <Panel X="0" Y="0" Width="60" Height="60" Margin="0,0,4,0">
                                            <Image Url="{user.avatar}" Alignment="Center" Width="60" Height="60"/>
                                            <Circle Width="60" Height="60" Fill="#e7e7e7"/>
                                        </Panel>
                                        <AnswerCopytext Text="{body}" Margin="64,0,0,0"/>
                                    </Panel>
                                    <Grid ColumnCount="2" Margin="64,0,0,16">
                                        <AnswerVeto Text="Report">
                                            <Clicked>
                                                <Callback Handler="{reportAnswer}"/>
                                            </Clicked>
                                        </AnswerVeto>
                                        <AnswerApprove Text="Approve">
                                            <Clicked>
                                                <Callback Handler="{approveAnswer}"/>
                                            </Clicked>
                                        </AnswerApprove>
                                    </Grid>
                                </StackPanel>
                            </Each>
                        </StackPanel>

                        <!-- USER ANSWER -->
                        <StackPanel Orientation="Vertical" Margin="0,0,0,16" Visibility="Visible">
                            <Panel Margin="64,0,0,0">
                                <Grid ColumnCount="2" Margin="0,0,0,6"> <AnswerName Value="You"/>
                                    <AnswerDate Value="just now"/>
                                </Grid>
                            </Panel>
                            <Panel>
                                <Panel X="0" Y="0" Width="60" Height="60" Margin="0,0,4,0">
                                    <Image Url="{user.avatar}" Alignment="Center" Width="60" Height="60"/>
                                    <Circle Width="60" Height="60" Fill="#e7e7e7"/>
                                </Panel>
                                <Panel Margin="64,0,0,0">
                                    <TextInput Padding="16,12,16,12" Margin="0,0,0,0" ux:Name="AnswerInput" Value="{Answer}" TextColor="#444444" PlaceholderText="Write an answer …" PlaceholderColor="#999999" IsMultiline="true" MinHeight="96">
                                        <Rectangle Fill="#fff" Layer="Background" CornerRadius="5,5,5,5" />
                                        <DropShadow Angle="90" Distance="1" Size="4" Spread="0.1" Color="#0003"/>
                                    </TextInput>
                                </Panel>
                            </Panel>
                        </StackPanel>
                        <!-- DIVIDER LINE -->
                        <Panel Margin="0,16,0,32">
                            <Rectangle Height="1" Fill="#e7e7e7"/>
                        </Panel>
                    </StackPanel>
                </Each>

            </StackPanel>

        </ScrollView>
    </Panel>

</App>

```

---

<div class="post-metadata">

**Author:** ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)\
**Post date:** [February 15, 2016, 1:58pm UTC](https://forums.fusetools.com/t/trouble-with-multiline-text-in-ios-preview/548/2 "2016-02-15T13:58:29Z")

</div>

Hi!

Thanks for reporting, this looks like a bug on our side. I have filed a ticket for this!

---

<div class="post-metadata">

**Author:** ![kusma](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kusma/32/595_2.png) [@kusma](https://forums.fusetools.com/u/kusma)\
**Post date:** [February 15, 2016, 2:55pm UTC](https://forums.fusetools.com/t/trouble-with-multiline-text-in-ios-preview/548/3 "2016-02-15T14:55:45Z")

</div>

For me, this works if I remove `Alignment="CenterLeft"` from the offending element. Perhaps this can work as a work-around until we’ve fixed the real culprit?

---

<div class="post-metadata">

**Author:** ![sandah](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sandah/32/112_2.png) [@sandah](https://forums.fusetools.com/u/sandah)\
**Post date:** [March 2, 2016, 9:23am UTC](https://forums.fusetools.com/t/trouble-with-multiline-text-in-ios-preview/548/4 "2016-03-02T09:23:38Z")

</div>

> **Erik Faye-Lund wrote:**
> 
> For me, this works if I remove `Alignment="CenterLeft"` from the offending element. Perhaps this can work as a work-around until we’ve fixed the real culprit?

I’m having the same issue as OP. That work-around fixed the issue for me, thanks :).