Programmatically changing color of input control not working

1

I am trying to change the text color of a control using something like the following:

If CSng(txtTCal.value) >= CSng(txtLCal.value) Then
     '$(txtTCal).css("color","red")
     txtTCal.style.color = "red"
     lblCal.style.color = "red"
Else
    '$(txtTCal).css("color","black")
    txtTCal.style.color = "black"
    lblCal.style.color = "black" 
End If

It’s a bootstrap 4 Input control.
The code that changes the color of the label works.
Neither one of the codes where I want to change the color of the control works at all.
Is there another form of color change that I can use?
Or is there a problem with the control?
Thanks.

2

It’s not a problem with the control. It’s how Bootstrap works. It has styling which defines the colors to be used.

You will need to figure out how Bootstrap determines the background color, then add code to override it. Chrome’s Inspect feature can be helpful here - it shows the css rules which apply to the element and where they come from.

3

It may be simpler to find the background classes used by bootstrap and just change the class. Google
bootstrap 4 cheat sheet for details.

4

Why should I be the one to fix this?

Shouldn’t NSB be using controls that work correctly?

This is what the Properties and Methods says for Input (Bootstrap):

Standard properties are supported

And one of those properties is color.

If NSB isn’t the one who created these controls, who should contact those who did, NSB or me?

5

I wish it was that simple. The Bootstrap styling overrides the standard properties.

The controls are Bootstrap’s. We provide a wrapper so they can be dragged and dropped into AppStudio projects. We use the Bootstrap code “as is” so they work as a Bootstrap user would expect.

6

This may provide a starting point for you for using bootstrap controls:

These functions allow the on-the-fly changing of appearance: like Info, Success, Warning. The colors are determined by the bootswatch theme you choose in project properties. Note: Bootswatch is yet another 3rd party addin to AppStudio.

function SetTextAppearance(element, appearance) {
  var xi, yi;
  for (xi =  0; xi < element.classList.length; xi++) {
    if (element.classList[xi].substr(0, 5) == 'text-') {
      element.classList.remove(element.classList[xi]);
      element.classList.add('text-' + appearance);
      };
    };
  };

function SetBtnAppearance(element, appearance) {
  var xi, yi, found = false;
  for (xi =  0; xi < element.classList.length; xi++) {
    if (element.classList[xi].substr(0, 4) == 'btn-' & element.classList[xi] !== 'btn-md' & 
                    element.classList[xi] !== 'btn-sm' & element.classList[xi] !== 'btn-secondary') {
      element.classList.remove(element.classList[xi]);
      element.classList.add('btn-' + appearance);
      found = true;
      };
    };
  if (! found) {
    element.classList.add('btn-' + appearance);
    };
  };

This code makes some assumptions about what classes are already defined in each control. You may need to make some modifications.

7

Thanks for the info. I’ll look into it.

8

I found this on this forum but only after searching many different things.

`

Input1_contents.style.color = RGB(255,0,0)

`

This works for me