Jump to content

CSS in runtime


MarBar77

Recommended Posts

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?

 

 

Link to comment
Share on other sites

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;
Link to comment
Share on other sites

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,

Link to comment
Share on other sites

 

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?

Link to comment
Share on other sites

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.

 

 

post-6052-0-63110500-1521138593_thumb.png

Link to comment
Share on other sites

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?

 

 

Link to comment
Share on other sites

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

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...