Imposible to change the color of hint-inactive

[cuzzea]

I am trying to set the hint text color when the input is inactive.

Which platform(s) does your issue occur on?

• iOS emulator iPhone13Pro iOS 15.2

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

• CLI: 8.1.5
• Cross-platform modules: 8.1.5
• Runtime(s): can't find tns-ios in package.json
• Plugin(s):

"dependencies": {
    "@angular/animations": "~13.1.1",
    "@angular/common": "~13.1.1",
    "@angular/compiler": "~13.1.1",
    "@angular/core": "~13.1.1",
    "@angular/forms": "~13.1.1",
    "@angular/platform-browser": "~13.1.1",
    "@angular/platform-browser-dynamic": "~13.1.1",
    "@angular/router": "~13.1.1",
    "@nativescript-community/ui-material-activityindicator": "^6.2.7",
    "@nativescript-community/ui-material-bottomsheet": "^6.2.9",
    "@nativescript-community/ui-material-button": "^6.2.7",
    "@nativescript-community/ui-material-cardview": "^6.2.9",
    "@nativescript-community/ui-material-floatingactionbutton": "^6.2.8",
    "@nativescript-community/ui-material-textfield": "^6.2.8",
    "@nativescript/angular": "^13.0.0",
    "@nativescript/core": "~8.1.1",
    "@nativescript/theme": "~3.0.1",
    "rxjs": "~7.4.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.1",
    "@angular/compiler-cli": "~13.1.1",
    "@nativescript/ios": "8.1.0",
    "@nativescript/types": "~8.1.1",
    "@nativescript/webpack": "~5.0.0",
    "@ngtools/webpack": "~13.1.1",
    "typescript": "~4.4.4"
  }

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

I am trying to set the hint text color when the input is inactive.

want it to be red

like it is here, on focus

Is there any code involved?

HTML

      <MDTextField
        variant="underline"
        hint="Hint text"
        secure="false"
        keyboardType="number"
        returnKeyType="next"
        autocorrect="false"
        text=""
        class="test"
      >
      </MDTextField>

CSS

.test {
  ripple-color: #04bfad;
  elevation: 4;
  stroke-color: #04bfad; /* the border color when active */
  stroke-inactive-color: #fff; /* the border color when inactive */
  floating-color: #04bfad; /* the floating placeholder color when active */
  floating-inactive-color: #04bfad; /* the floating placeholder color when inactive */
  placeholder-color: #fff;
  placeholder-inactive-color: #fff;
  background-color: transparent;
  color: #fff;
  font-size: 15;
  margin-bottom: 10;

  /* TEST VALUES */

  selected-background-color: #f00;
  tab-text-color: #f00;
  -webkit-focus-ring-color: #f00;
  separator-color: #f00;
  error-color: #f00;
  helper-color: #f00;
  link-color: #f00;
  tint-color: #f00;
  ripple-color: #f00;
  elevation: 4;
  stroke-color: #f00;
  stroke-disabled-color: #f00;
  stroke-inactive-color: #f00;
  floating-color: #f00;
  floating-inactive-color: #f00;
  placeholder-color: #f00;
  placeholder-disabled-color: #f00;
  placeholder-active-color: #f00;
  placeholder-inactive-color: #f00;
}

[farfromrefug]

@cuzzea there is no.prop.to that but you can do.it with css pseudo selector (css depending on object property). set a focused property on the textfield. plug that prop on focus events. now set hint color in css based on thar prop

[cuzzea]

When it's focused is not an issue. I can change the color of the hint. The problem is when it's not selected and empty. In that case I can't change the color. In the image and code on top, I set all the properties of the css color (that I could find/think) to red, as you can see in the first image, the Hint text is not red. That is the issue.

[farfromrefug]

@cuzzea yes i understand that s why i gave you the hint to do it with pseudo selector css.

[vallemar]

@cuzzea this pr fix this! https://github.com/nativescript-community/ui-material-components/pull/423

[vallemar]

@farfromrefug well this fixes setting it by code but by css i have not been able to apply any styling of the component, i can't help with this because i don't know how to bind a component with css

[farfromrefug]

@vallemar thanks I ll have to take a look at this