Nativescript: Issue with css letter-spacing in ios

[priyangamani]

Dear friend, we, the rest of the NativeScript community really
appreciate your feedback! While we are doing all we can to take care of every
issue, sometimes we get overwhelmed. Because of that, we will consider issues
that are not constructive or problems that cannot be reproduced "dead".
Additionally, we will treat feature requests or bug reports with unanswered
questions regarding the behavior/reproduction for more than 20 days "dead". All
"dead" issues will get closed.

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

iOS/Android/Both

Please provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
  package.json file of your project)
• Plugin(s): (look for the version number in the package.json file of your
  project)

Please tell us how to recreate the issue in as much detail as possible.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @priyangamani,
First of all, thank you for your interest in NativeScript.
Regarding your request, the letter-spacing property is already supported in NativeScript as it is mentioned here in this issue. For your convenience, I am attaching sample code and screenshot for the simulator.
XML

<StackLayout class="p-20">
        <Label text="Tap the button" textWrap="true" class="h1 text-center"/>
    </StackLayout>

CSS

Label{
    letter-spacing: 1;
}

[priyangamani]

Thanks For ur reply @tsonevn
I tried to set letter-spacing property in Textfield but it won't work in ios (In android working fine..) . I am attaching sample code and screenshot for the simulator also please check with textfield.

XML

CSS
.field{
letter-spacing: 1;
}

[tsonevn]

Hi @priyangamani,
I tested the letter-spacing also on the TextField component and again the property seems to apply the style properly.
Please verify, whether you have defined some specific style properties for the TextField property globally, which could disable the letter spacing.

It would help if you could provide any info about your environment(NativeScript cli, tns-core-modules, node versions) and more info about the iOS simulator. You could also review the attached project and to make the needed changes, which will allow us to recreate the behavior.

Archive.zip

[priyangamani]

Thanks @tsonevn

In Textfield component set the value of text, then only the letter spacing will work.
Without the text value the letter spacing won't work in Textfield.

TextField with Text value(Working)

TextField without Text value(doesn't work)

[tsonevn]

Hi @priyangamani,
I investigate further the reported scenario and indeed the letter-spacing will not be respected, while the text value of the TextField is changed runtime. You could keep track on the issue for further info and about a possible fix for the problem.

[Johanneke]

Is anyone working on this bug? I would really like to use letterSpacing in Textfields, but I can't do that with this bug...

[tsonevn]

Hi @Johanneke,
This issue is still under review. On that matter, any pull request, that provides a fix for this scenario, will be highly appreciated. Check out our contribution guidelines.