0

I’m trying to create a NativeScript <TextField> that only has a single border underneath the control. There are several Stack Overflow questions that address this problem for UITextFields generically (such as How to only show bottom border of UITextField in Swift), however—for whatever reason—those same techniques don’t appear to work for NativeScript <TextField>s.

For instance I would expect this code to work:

<!-- my-page.xml -->
<TextField id="email" />

/* my-page.js */
var myTextField = page.getViewById("email").ios;
var bottomLine = new CALayer();
bottomLine.frame = CGRectMake(1, 50, 50, 1);
bottomLine.backgroundColor = UIColor.whiteColor().CGColor;
myTextField.borderStyle = UITextBorderStyle.None;
myTextField.layer.addSublayer(bottomLine);

...but no border is drawn.

I’m not sure if I’m doing something wrong, or if something like {N}’s CSS implementation is overwriting my changes. Any help would be appreciated.

Thanks!

Community
  • 1
  • 1
TJ VanToll
  • 12,584
  • 4
  • 43
  • 45

1 Answers1

-1

Add the following code:

let width = CGFloat(1.0);
bottomLine.frame = CGRect(x: 0, y: myTextField.frame.size.height - width, width:  myTextField.frame.size.width, height: myTextField.frame.size.height);
bottomLine.backgroundColor = UIColor.whiteColor().CGColor;
myTextField.borderStyle = UITextBorderStyle.None;
myTextField.layer.addSublayer(bottomLine);
Evana
  • 1,754
  • 13
  • 12