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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...