This is a migrated thread and some comments may be shown as answers.

TextField width change according to user's input

1 Answer 190 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
License
Top achievements
Rank 1
License asked on 21 Dec 2016, 08:02 AM

Hi,

When the user input a tag , I want the textfield becomes larger than the default width, but the width is always be the original width. The code is as follows:

//tag.component.html

<WrapLayout orientation="horizontal"  class=" wrapStyle wrapStyleTop" >
    <WrapLayout orientation="horizontal" class="tagStyle">
       <TextField #text (returnPress)="returnPress()"  updateTextTrigger="textChanged"  hint="your tag" secure="false"></TextField>
    </WrapLayout>
  </WrapLayout>

//tag.component.scss

.wrapStyleTop{
  border-bottom-width: 2 ;
  border-bottom-color: #cfcfcf;
}
.wrapStyle{
  margin-top:10;
  margin-left:20;
  margin-right: 20;
}

Can you help me?

1 Answer, 1 is accepted

Sort by
0
Accepted
Nick Iliev
Telerik team
answered on 22 Dec 2016, 04:11 PM
Hello ,

Based on your code samples, there is no function that should trigger the CSS or other updates.
There are several approaches for your case - for example, you can listen for gesture event and change your TextField when the user taps on it (and then change it back when the focus is lost which can be checked with focus() )

e.g.
HTML
<TextField #firstTx width="200" hint="Enter text" (tap)="onTap($event)" >
</TextField>

TypeScript
onTap(args: GestureEventData) {
 console.log("Object that triggered the event: " + args.object);
 console.log("View that triggered the event: " + args.view);
 console.log("Event name: " + args.eventName);
 
 var textField = <TextField>args.object;
 textField.cssClass = "bigWidth"; // or apply other logic like scale, animate, etc.
}


Or you can bind to textChange and listen for this event (when the text property in the TextFiled is going to change). For that case, updateTextTrigger setting will play an important role because if you set it with textChange that means that the textChange will be triggered on each letter/symbol changed in your TextField. Using this event you can listen and change your textField CSS class or other properties when the user start typing

e.g.

HTML
<TextField #myTextField width="200" hint="Enter tag" autocorrect="false
    (textChange)="onTextChange(myTextField.text)"updateTextTrigger="textChanged">
</TextField>

TypeScript
export class TextFieldBindingComponent {
 
    onTextChange(input) {
        console.log(input);
 
        if (input.length >= 1) {
            // change your UI here
            // myTextField.cssClass = "newClass";
            // myTextField.width = "400";
        }
    }

Note that in both cases I have predefined width for my TextField. If no width is set it will span in all the available space provided by the parent layout.

Regards,
Nikolay Iliev
Telerik by Progress
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Tags
General Discussion
Asked by
License
Top achievements
Rank 1
Answers by
Nick Iliev
Telerik team
Share this question
or