Remove Grey Area Around Disabled UniImage

[mos]

In the screenshot below there are two TUniImages the one on the left has Enabled set to True while the one on the right has Enabled set to False.

When the image is disabled a grey area appears surrounding the image as the image does not fully occupy the whole area of the TUniImage.

Is it possible to remove this grey area so that the white background appears but still show the green tick as disabled (it will look like the image on the left but only the green tick will show as disabled).

 

[Sherzod]

5 hours ago, mos said:

In the screenshot below there are two TUniImages the one on the left has Enabled set to True while the one on the right has Enabled set to False.

When the image is disabled a grey area appears surrounding the image as the image does not fully occupy the whole area of the TUniImage.

Is it possible to remove this grey area so that the white background appears but still show the green tick as disabled (it will look like the image on the left but only the green tick will show as disabled).

Hello,

One possible solution is to use a CSS rule I think.

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  UniImage1.JSInterface.JSCall('setStyle', ['opacity', 0.5]); // instead of Enabled=False
  UniImage1.JSInterface.JSCall('setStyle', ['opacity', 1]);   // instead of Enabled=True
end;

 

[mos]

Thank you that worked.

[likemike]

Hello!

I don't know why, but the code doesn't work on the mobile version.

How can I do the same with UnimImage?

Thanks in advance

Mike

[Sherzod]

32 minutes ago, likemike said:

How can I do the same with UnimImage?

Hello!

What image format are you loading (PNG/JPG)?
And are you disabling it via Enabled = False?

If possible, please upload a sample image.

[likemike]

Hi Sherzod,

the images have PNG format and Enabled:=FALSE;

The "J" is not enabled, but shows no difference.

I've set "AlphaJ.JSInterface.JSCall('setStyle', ['opacity', 0.5]);"  (AlphaJ is the J-Image)

[Sherzod]

I will check.

[Sherzod]

2 hours ago, likemike said:

I've set "AlphaJ.JSInterface.JSCall('setStyle', ['opacity', 0.5]);"  (AlphaJ is the J-Image)

Try this approach:

CustomCSS ->

.x-disabled img {
  opacity: 0.5;
}

 

[likemike]

Hi Sherzod,

that one is working!

Thanks a lot!