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.
<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>