CSS Round Image

Questions
1

Hi.

I use this CSS code to round an image in NG Client:

width:40px;
height:50px;
border-radius:25px;

In 2019.6.2 Servoy version works fine, but with 2022.9.0 Servoy version dosen´t works

Any idea

Thanks

2

Hi,

Most likely it’s a difference in the DOM structure between 2019.6.2 and 2022.9.0
Apart from moving upgrading to 2022.9.0 did you also move from NG to TiNG?

In order to help you out, you will need to provide more information:

  1. what type of client do you use (NG/TiNG)
  2. what type of webcomponent do you use to display the image
  3. how do you reference the image
  4. what does your style class look like and how is it referenced on the component
3

I’m using NG cliente
I’m using a Image webComponent
The reference to the image is by dataProvider
The reference to the style is by StyleClass
[attachment=0]Captura.JPG[/attachment]

Captura.JPG
Captura.JPG358×515 34.8 KB

4

Any solution for this problem???

In developer the iamge show rounded

developer.jpg

but wen run the solution, the image looks square

cuadrada.jpg

cuadrada.JPG
cuadrada.JPG406×470 21.4 KB

developer.JPG
developer.JPG332×204 3.93 KB

5

Hola Juan Antonio!

I see you are using pixels in your border-radius. Shouldn´t you use percentage to do it like 50%? (border-radius: 50%:wink:

Saludos,

6

Hola Juan

I have also tried it with percentages and it doesn’t work

In previous versions, when you associated a style to an image component, it was assigned to you correctly

This is not the case now, when assigning a style to an image component, the box that contains the image does apply the stylo that you are assigning to it, but the image that contains the box does not.

The “bts-media” style is always applied to the image, so for your photo to apply the changes you want in your css, you must create this “bts-media” style in your css and apply the changes there.

I don’t know if there should be another property in the image component that would allow this style to be modified, since when making this modification of the “bts-media” this change is applied to all the images of the application and it is not what is desired

Un saludo

7

Hi Juan,

The “bts-media” style is always applied to the image, so for your photo to apply the changes you want in your css, you must create this “bts-media” style in your css and apply the changes there.

I don’t know if there should be another property in the image component that would allow this style to be modified, since when making this modification of the “bts-media” this change is applied to all the images of the application and it is not what is desired

You can always limit the scope of the style in CSS by doing something like this:

/* Using img instead of .bts-media works for both bootstrap component and default Servoy core component */
.your-class-with-round-border > img {
    border-radius: 50%;
}

The round border will be applied only to the components with your custom class

8

Thanks dcamargo,

That’s works fine