Nativescript: [FormattedString] Button with multi line text in iOS

[Jai-Krish]

The 2^nd Span gets hidden while using the following code:

<Button>
  <FormattedString>
    <Span text="12345&#x0000;&#x000a;"></Span>
    <Span text="Line 2"></Span>
  </FormattedString>
</Button>

This code works as expected in Android.

[tsonevn]

To be able to render the text from both Spans in separate lines you should use \n, which will break the line as expected for both iOS and Android.
For example:

 <Button  textWrap="true">
            <FormattedString>
                <Span [text]="title" fontSize="14" ></Span>
                <Span class="menu-text" [text]="label ? '\n\n'+label : ''"></Span>
            </FormattedString>
        </Button>

[Jai-Krish]

The \n only works when we use the property binding like this [text]="'12345\n'" but we could work around that by using 
 which is the ASCII for Line feed. Still the error exists even if I use the exact same code that you've provided.

[tsonevn]

Hi @Jai-Krish
Make sure that you are using latest CLI 3.0.3 and tns-core-modules 3.0.0. Similar issue with breaking the line is already reported here. However, the above-given workaround should be applicable. I am attaching sample project, where the solution with \n is shown.
For your convenience, I am also attaching snippet from the simulator.
Archive.zip

[Jai-Krish]

Thank you! updating the CLI fixed the problem but in iOS the text always aligns to left even if I set text-align: center

[tsonevn]

Hi @Jai-Krish,
text-alignment center should work as expected without any further setting, Something that could cause this behavior could be related to some letter-spacing at the begging of the text Span.
Please verify, whether there are some spacing and if so remove it from the text.

[Jai-Krish]

The class text-center works in Label with FormattedString but not with Button. Here is a snippet of this Archive.zip

[tsonevn]

Hi @Jai-Krish,
Indeed this is an issue in the current official version and setting up text-align will not be respected, while using formatted string for a button.

However, this behavior has been fixed in the upcoming release and you could test it on your side while using @next tag.
Steps:

1. tns plugin remove tns-core-modules
2. npm install tns-core-modules@next --save
3. remove platforms and node_modules folders

After those steps the style="text-align:center;" should also work for this component

<ActionBar title="My App" class="action-bar">
</ActionBar>
<StackLayout class="page">
     <Button  style="text-align:center;" textWrap="true">
            <FormattedString >
                <Span  [text]="'12345'" fontSize="14" ></Span>
                <Span class="menu-text" [text]="'\nLabel2'"></Span>
            </FormattedString>
        </Button>
</StackLayout>

[vance]

textWrap="true" is the magic sauce here... missed that the first time.

[Deadspaceattj]

I found a way of getting it to work on both Android and iOS and in my instance picked up that when there is a line break (Both HTML formated or ANCII) inside the span containing the text or icon the text disappears on iOS. The below worked perfectly for me.

.font-icon-btn
{
    width: 110;
    height: 100;
    color: #999999;
    text-align: center;
}
.img-button-text {
    width: 80;
    height: 60;
    border-radius: 10;
    margin:7;
    color: #999999;
}

<Button class="font-icon-btn" visibility="{{ FoodandWine }}" textWrap="true">
    <Button.formattedText>
        <FormattedString>
        <FormattedString.spans>
            <Span text="&#xf000;" fontFamily="FontAwesome" fontSize="40" />
            <Span text="&#x0a;" fontSize="20" />
            <Span text="&#x0a;" fontSize="10" />
            <Span text="Food and Wine" class="img-button-text" fontSize="12" textWrap="false"/>
        </FormattedString.spans>
        </FormattedString>
    </Button.formattedText>
</Button>

[SvetoslavTsenov]

Hi @Jai-Krish, I have tested your scenario on my side with tns-core-modules@next and it seems that the issue is already fixed. Please have in mind in order to achieve this you need to set textWrap=true as @vance has mentioned before.
<Button textWrap="true" > <FormattedString> <Span text="12345&#x0000;&#x000a;"></Span> <Span text="Line 2"></Span> </FormattedString> </Button>

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.