TUniComBox Image not appearing on some themes

[Polylog]

Hello,

I am migrating my application to UniGui. And I like 2 themes  :  uni_win11_polar_light_classic et uni_win11_polar_dark_classic.

We use UnicomboBox with images in some cases.

The images are not displayed in the edit. (They are displayed in the dropdown list)  

it generates  in javascript something like this on the browser :

 

element.style {

  background-image: url(/cache/prototype_exe/res/__15607FE20BF148372151CDB7.png);

 ....

}

 

The problem, it is ignored because another css class overwrites this :

 

.x-form-text-default {

background-image: none !important;

 ...

}

 

What are my solutions to resolve this point.?

 

Have I a way to replace background-image: url(/cache/prototype_exe/res/__15607FE20BF148372151CDB7.png); 

with  background-image: url(/cache/prototype_exe/res/__15607FE20BF148372151CDB7.png) !important; ?

 

[Sherzod]

Hello,

Do you have a simple testcase to check?

[Polylog]

Thanks for the quick answer. I modified the demo of combobox to show the problem.

If you change the theme of the example to mac, the problem will not be there.

I use the last revision.

ComboBox - Modes.zip

[Sherzod]

Ok, thanks. We will check. 

[Sherzod]

@Polylog

I have a workaround for now, for all UniComboBox.

[Sherzod]

You can try and even optimize the code.

1. UniMainModule ->

2.

uses ..., uniComboBox;

3. OnNewComponent event ->

procedure TUniMainModule.UniGUIMainModuleNewComponent(AComponent: TComponent);
begin
  if (AComponent is TUniComboBox) then
    with (AComponent as TUniComboBox).JSInterface do
    begin
      JSAddListener('change', 'function(sender){sender.getEl().query(".x-form-field")[0].style.setProperty("background-image",sender.getEl().query(".x-form-field")[0].style["background-image"], "important")}');
      JSAddListener('dirtychange', 'function(sender){sender.getEl().query(".x-form-field")[0].style.setProperty("background-image",sender.getEl().query(".x-form-field")[0].style["background-image"], "important")}');
      JSAddListener('afterrender', 'function(sender){sender.fireEvent("dirtychange", sender)}');
    end;
end;

 

[Polylog]

Thanks! This workaround works fines.