Jump to content

CSS Color Issue


mos

Recommended Posts

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?

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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', '');
}

 

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...