Imposible to change the color of hint-inactive

cuzzea commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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

vallemar commented 1 year ago

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

vallemar commented 1 year ago

@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 commented 1 year ago

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

nativescript-community / ui-material-components