CSS Round Image

Questions and answers on designing your Servoy solutions, database modelling and other 'how do I do this' that don't fit in any of the other categories

CSS Round Image

Postby JuanMartin » Thu Nov 24, 2022 10:48 pm

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
Juan Antonio Martín Pinilla
Servoy 2022.9.2 - PostgreSql 9.4
software@critenerife.com
User avatar
JuanMartin
 
Posts: 169
Joined: Tue Nov 25, 2008 9:20 pm
Location: Tenerife - Spain

Re: CSS Round Image

Postby mboegem » Fri Nov 25, 2022 9:43 am

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
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: CSS Round Image

Postby JuanMartin » Fri Nov 25, 2022 10:07 am

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
Captura.JPG
Captura.JPG (45.94 KiB) Viewed 3630 times
Juan Antonio Martín Pinilla
Servoy 2022.9.2 - PostgreSql 9.4
software@critenerife.com
User avatar
JuanMartin
 
Posts: 169
Joined: Tue Nov 25, 2008 9:20 pm
Location: Tenerife - Spain

Re: CSS Round Image

Postby JuanMartin » Tue Feb 21, 2023 9:55 pm

Any solution for this problem???

In developer the iamge show rounded

[img]developer.jpg[/img]


but wen run the solution, the image looks square

[img]cuadrada.jpg[/img]
Attachments
cuadrada.JPG
cuadrada.JPG (29.4 KiB) Viewed 3201 times
developer.JPG
developer.JPG (12.17 KiB) Viewed 3201 times
Juan Antonio Martín Pinilla
Servoy 2022.9.2 - PostgreSql 9.4
software@critenerife.com
User avatar
JuanMartin
 
Posts: 169
Joined: Tue Nov 25, 2008 9:20 pm
Location: Tenerife - Spain

Re: CSS Round Image

Postby ProRM » Tue Feb 28, 2023 6:12 pm

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%;)

Saludos,
User avatar
ProRM
 
Posts: 107
Joined: Thu Sep 18, 2008 10:24 pm
Location: Uruguay

Re: CSS Round Image

Postby JuanMartin » Wed Mar 01, 2023 2:03 pm

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
Juan Antonio Martín Pinilla
Servoy 2022.9.2 - PostgreSql 9.4
software@critenerife.com
User avatar
JuanMartin
 
Posts: 169
Joined: Tue Nov 25, 2008 9:20 pm
Location: Tenerife - Spain

Re: CSS Round Image

Postby dcamargo » Wed Mar 01, 2023 4:39 pm

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:
Code: Select all
/* 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
Danny Camargo
Servoy & Web Developer
dcamargo
 
Posts: 13
Joined: Tue Aug 23, 2016 8:59 pm

Re: CSS Round Image

Postby JuanMartin » Fri Mar 10, 2023 8:03 pm

Thanks dcamargo,

That's works fine
Juan Antonio Martín Pinilla
Servoy 2022.9.2 - PostgreSql 9.4
software@critenerife.com
User avatar
JuanMartin
 
Posts: 169
Joined: Tue Nov 25, 2008 9:20 pm
Location: Tenerife - Spain


Return to Programming with Servoy

Who is online

Users browsing this forum: No registered users and 17 guests