Nativescript-angular: Cannot remove textfield border or implement theme class styling

[SGissubel]

Which platform(s) does your issue occur on?

• iOS emulator

tns version: 4.1.2
Cross-platform modules: "version": "4.1.1"
"tns-ios": "version": "4.1.1"

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

I am created a few form pages. I tried using the theme classes to have a border bottom only, but all I am getting is a border-box around all text-fields.

Desired output:

Code:

<GridLayout rows="60, 45, 50, 50, 50, 50, 50, 50" class="container">
    <Label row="0"
        ...></Label>

    <Label row="1"
        ...></Label>

  <StackLayout class="input-field" row="2">
    <TextField
      class="input"
      [(ngModel)]="userSignup.fullName"
      hint="Full Name"
      autocorrect="false"
      autocapitalizationType="none"
      required></TextField>  
    <StackLayout class="hr-light"></StackLayout>
  </StackLayout>


  <StackLayout class="input-field" row="3">
    <TextField
      class="input"
      [(ngModel)]="userSignup.email"
      hint="Email Address"
      keyboardType="email"
      autocorrect="false"
      autocapitalizationType="none"
      required></TextField>
    <StackLayout class="hr-light"></StackLayout>
  </StackLayout>
...

Tried removing the border with css:

.input-field {
    margin: 0;
    padding: 0;
    border: none;
}
TextField {
    border: none;
    border-box: none;
    border-width: 0;
}

Just looking how to remove the border around the entire text-area and show only the border-bottom;

[tsonevn]

HI @SGissubel,
I noticed that you have missed adding form CSS class to the main GridLayout container. This class is needed for properly applying the TextField styling. You can check the docs here. For your convenience, I am attaching a sample project.

Archive.zip

[SGissubel]

Thank you @tsonevn for your response. I actually did try this, just did not include it above. Just tried it again now and it again did not work.

I followed the docs when setting it up. Wondering if I am missing anything else. It appears that I do have the required module: nativescript-theme-core.

Otherwise I am unsure of what I miss be missing.

[SGissubel]

<GridLayout rows="60, 45, 50, 50, 50, 50, 50, 50" class="form container">
    <Label row="0"
        ...></Label>

    <Label row="1"
        ...></Label>

  <StackLayout class="input-field" row="2">
    <TextField
      class="input"
      [(ngModel)]="userSignup.fullName"
      hint="Full Name"
      autocorrect="false"
      autocapitalizationType="none"
      required></TextField>  
    <StackLayout class="hr-light"></StackLayout>
  </StackLayout>


  <StackLayout class="input-field" row="3">
    <TextField
      class="input"
      [(ngModel)]="userSignup.email"
      hint="Email Address"
      keyboardType="email"
      autocorrect="false"
      autocapitalizationType="none"
      required></TextField>
    <StackLayout class="hr-light"></StackLayout>
  </StackLayout>
...

[tsonevn]

HI @SGissubel,
Can you review the attached sample project in my previous comment and make the needed changes, which will allow me to recreate the issue?

Meanwhile, I would suggest making sure that all the latest changes are applied to the app. Regarding that, can you remove the platforms folder and rebuild the project again?

[SGissubel]

I removed the platforms folder. And rebuilt the project. Still no changes.

As for the sample project - considering how simple it is, I couldn't imagine what I am missing that the sample has or implements. All things referenced inside of the sample I displayed above.

Still no changes.

Additionally - I cannot now ADD a border to buttons...:

<Button class="btn btn-primary btn-outline" row="1" col="3" rowSpan="3" text="Edit Profile"></Button>

No border appears.

Even with added styling to Button

[nectar]

Possible this is affecting it... ?

CONSOLE ERROR file:///app/tns_modules/tns-core-modules/trace/trace.js:165:30: Error: Css styling failed: Error: undefined:1:5: missing '{'

I have been looking into it. No solutions have worked so far.

https://github.com/NativeScript/nativescript-dev-sass/issues/53

[SGissubel]

Also, I know this was closed... but no solution was ever arrived at.

[tsonevn]

Hi @SGissubel,
Excuse me for the delay in reply.
I am still unable to recreate the problem on my side, which makes the investigating hard. Can you send me your project in a private message in Slack? My nickname is nikts.