CSS Color Issue

[mos]

I have a MainForm which contains a TUniLabel called lblHeader.

In my external CSS file I have the following:

.lblHeader {
  color: red !important;
}

Now if I don't have the !important the red color does not get applied to the label.

The issue I have is I need to in code to be able to change the color of the label from red to blue in code.

I tried the following code but it did not work:

lblHeader.JSInterface.JSCode(#1'.setStyle("color","blue");');

The above does work if I remove the !important for the red but the color red doesn't get applied.

I also tried:

lblHeader.JSInterface.JSCode(#1'.setStyle("color","blue !important");');

But this does not work.

How can I get the label to change from red to blue at runtime?

[Sherzod]

4 hours ago, mos said:

How can I get the label to change from red to blue at runtime?

Hello,

You can try to use without customCSS:

1. UniFormCreate:

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniLabel1.JSInterface.JSConfig('style', ['color: red']);
end;

2. Runtime:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  UniLabel1.JSInterface.JSCall('setStyle', ['color', 'blue']);
end;

 

[mos]

Hi Sherzod,

  The reason I need to have the color set in the external CSS file is so that I don't need to recompile the exe for different sites and can just change the CSS as needed.

   I also have a configuration dialog where the user can set the colors that will override the external CSS file colors for some labels  etc. if they choose not to modify the CSS.

  Now the code using setStyle does work if the !important is removed but removing that causes the red to not be applied to the label.

[Sherzod]

2 minutes ago, mos said:

  Now the code using setStyle does work if the !important is removed but removing that causes the red to not be applied to the label.

Then please make a simple testcase to check.

[mos]

Hi Sherzod,

  Attached is a test project with an external CSS file.

 If you run this project the label should change to red but it doesn't.

 If you modify the css and add !important it will change it to red.

 

CSSTest.zip

[Sherzod]

1 hour ago, mos said:

If you run this project the label should change to red but it doesn't.

 If you modify the css and add !important it will change it to red.

Hi, 

I will check. 

[Sherzod]

4 hours ago, mos said:

  Attached is a test project with an external CSS file.

Are you sure that your css file is in the right path?

[mos]

Hi Sherzod,

  Yes it is.

  I can only get the label to change color to red if I have !important after it in the CSS file.

[Sherzod]

17 minutes ago, mos said:

  I can only get the label to change color to red if I have !important after it in the CSS file.

Yes.

OK, try this approach:

function afterCreate(sender)
{
  sender.setStyle('color', '');
}

 

[mos]

Hi Sherzod,

  That worked.

  Thanks again for your help.