TextField width change according to user's input

2 posts, 1 answers
  1. License
    License avatar
    34 posts
    Member since:
    Oct 2016

    Posted 21 Dec 2016 Link to this post

    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?

  2. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    124 posts

    Posted 22 Dec 2016 Link to this post

    Hello Concordya,

    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.
Back to Top