Adding a border on an image using a TWebImageControl

WEB TMS WEB Core
1

I need to overlap some images using a TWebImageControl. I'd like to put a border around the so you can see a clear boundary between the cards. They're like playing cards, and most playing cards have a small border on both sides.

There's no way to do that in a TWebImageControl. How can it be done? Using CSS? Or putting the image on a panel? Something else?

2

Add CSS via ElementClassName

About the CSS to use, here is some info:

1 Like
3

what if you want to apply multiple Element Class Names to a given control?

eg, Rotate 180 + 10px border

4

ElementClassName is a text field that supports a space-delimited list of CSS classes. I don't know if there's a limit to the overall length or number of classes, but you're unlikely to hit it in any kind of normal setting. Dozens of classes at least.

If you've added a CSS file to your project, you could define your own custom classes like Rotate180 and Border10 to your CSS file. in your Delphi app, in the ElementClassname, you would then add Rotate180 Border10 to that field, appending to whatever is there already if it isn't empty. Then in your CSS file you could try this.

.Rotate180 {
   transform: rotate(180deg);
}
.Border10 {
   border: 10px solid black;
   border-radius: 5px;
}
5

So just insert a list of names separated with spaces. Got it.

In this case, they're intdepenent states, so I probably need to add a method to generate that list each time I need to update it.

function GetECNames : string;
begin
  . . . 
end;

img.ElementClassNames := GetECNames;
6

If it's the same list all the time, you can just combine them as well. As in Rot180B10 and then...

.Rot180B10
   transform: rotate(180deg);
   border: 10px solid black;
   border-radius: 5px;
}

Note that in the CSS, the classes start with a period. If you want to define a class that applies to exactly one element, use a # symbol and the ElementID property. CSS is insanely powerful but it takes a dramatically different approach than, say, VCL styling.