Jump to content

Circular image


Fred Montier

Recommended Posts

Hi, having problem with CSS in a uniImage. My goal is to produce circular images with CSS but I can only apply to the main class in CustomCSS as follows:

img {
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

Problem is, affects all uniImage. I want to apply to a specific uniImage

When I change the name for instance ...

.avatar {
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

And try to apply in only one specific  uniImage it does not work. Have tried beforeinit, run time adding  config.cls , addCls etc...

Using version 1.0.70.92

 

 

KPT-EVT3.png

Edited by fredmontier
Forgot print
Link to comment
Share on other sites

11 minutes ago, fredmontier said:

And try to apply in only one specific  uniImage it does not work. Have tried beforeinit, run time adding  config.cls , addCls etc...

Hi,

Try:

1. UniImage ->

function beforeInit(sender, config)
{
    config.cls='avatar';
}

2. CustomCSS:

.avatar img {
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

 

  • Like 1
Link to comment
Share on other sites

But how to have two diferent sizes, for example, i need with 50px on header and 24 on grid it assume only the first one even with different names, the second stay squared.

ON FIRST BUTTON

function beforeInit(sender, config)
{
   config.cls='avatar50';
}

ON SECOND BUTTON

function beforeInit(sender, config)
{
   config.cls='24avat';
}

on SERVERMODULE

 .avatar50 img {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

 .24avat img {
  vertical-align: middle;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

Result:

image.png.bcc826263c774be96c17424af97cf48c.png

Link to comment
Share on other sites

50 minutes ago, FFREDIANELLI said:

My deadline date to finish my programa is arriving... no one have one idea to how to have two circular images of different sizes in the same form ?

.avatar50 img {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.avatar24 img {
  vertical-align: middle;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
function beforeInit(sender, config)
{
    config.cls='avatar50'
}

function beforeInit(sender, config)
{
    config.cls='avatar24'
}

 

Link to comment
Share on other sites

  • 1 month later...
On 4/17/2019 at 1:00 AM, Sherzod said:

CSS class names should not begin with a number...

 

On 4/17/2019 at 12:58 AM, Sherzod said:

.avatar50 img {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.avatar24 img {
  vertical-align: middle;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

function beforeInit(sender, config)
{
    config.cls='avatar50'
}

function beforeInit(sender, config)
{
    config.cls='avatar24'
}

 

Every one ,This method works well,

but ,

You should not copy the code from the web,

You should type the code yourself.

 

Link to comment
Share on other sites

  • 2 weeks later...

Hello, 

1 hour ago, gerhardhziegler said:

If I just copy the Source-Text into UniEvents.Text it doesnt work.

Give an example, a testcase  of how you do it.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...