CSS in runtime

[MarBar77]

Hi,

 

How can I do that:

 

I have UniPanel and I want to change its style in runtime, not using CustomCSS.

 

e.g.

After run, my Panel has backgroundcolor =silver and border color = red

 

somewhere in my program i want to change border color for green

 

and somewhere else i want to change this color for yellow.

 

How can I set style dynamically from runtime for particular control?

 

 

[Sherzod]

Hi,

 

somewhere in my program i want to change border color for green

 

and somewhere else i want to change this color for yellow.

 

How can I set style dynamically from runtime for particular control?

 

One possible solution as in this post:

http://forums.unigui.com/index.php?/topic/8324-tunipanel-border-color/&do=findComment&comment=48483

  with UniPanel1.JSInterface do
  begin
    JSCode(#1'.setBodyStyle("border-color", "red");');
    JSCode(#1'.setBodyStyle("border-width", "5px");');
  end;

[MarBar77]

Thank you

[ldb68]

One possible solution as in this post:

http://forums.unigui...lor/#entry48483

with UniPanel1.JSInterface do
  begin
    JSCode(#1'.setBodyStyle("border-color", "red");');
    JSCode(#1'.setBodyStyle("border-width", "5px");');
  end;

 

 

Can you find a solution for a UnimPanel. This dosen't work.

 

Thanks

[Sherzod]

Hi,

 

 

One possible solution as in this post:

http://forums.unigui...lor/#entry48483

with UniPanel1.JSInterface do
  begin
    JSCode(#1'.setBodyStyle("border-color", "red");');
    JSCode(#1'.setBodyStyle("border-width", "5px");');
  end;

 

 

Can you find a solution for a UnimPanel. This dosen't work.

 

Thanks

 

 

Try this:

  with UnimPanel1.JSInterface do
  begin
    JSCode(#1'.element.setStyle("border-color", "red");');
    JSCode(#1'.element.setStyle("border-width", "5px");');
    JSCode(#1'.element.setStyle("border-style", "solid");');
  end;

Best regards,

[MarBar77]

 

Hi,

 

 

One possible solution as in this post:

http://forums.unigui.com/index.php?/topic/8324-tunipanel-border-color/&do=findComment&comment=48483

  with UniPanel1.JSInterface do
  begin
    JSCode(#1'.setBodyStyle("border-color", "red");');
    JSCode(#1'.setBodyStyle("border-width", "5px");');
  end;

 

Hmm, it works, when panel is placed directly on Form. I doesn't work when panel is placed on TUniPageControl TabSheet.

 

Any workaround for this?

[MarBar77]

Hmm, it works, when panel is placed directly on Form. I doesn't work when panel is placed on TUniPageControl TabSheet.

 

Any workaround for this?

 As an example I am changing TitleBar (which is TUniPanel) background-color.

 

 

[MarBar77]

Ok, I found it.

 

In my panel I have code:

 

  with TitlePanel.JSInterface do

  begin

    JSCode(#1'.setBodyStyle("background-color", "red");');

  end;

 

But I have in my CustomCSS stylization of PageControl:

 

.tabPanel .x-panel-body{

  background-color: white !important;

  border-color: white !important;

  border-width: 0px !important;

  border-style: solid !important;   

}

 

so PageControl background-color overwrites Panel background-color because of !important clause.

 

So my Question is

How to make 

JSCode(#1'.setBodyStyle("background-color", "red");');

more important than parent control?

 

 

[ldb68]

Hi,

 

 

Try this:

  with UnimPanel1.JSInterface do
  begin
    JSCode(#1'.element.setStyle("border-color", "red");');
    JSCode(#1'.element.setStyle("border-width", "5px");');
    JSCode(#1'.element.setStyle("border-style", "solid");');
  end;

Best regards,

 thanks