Jump to content

Displaying large image on a TUniButton or a TUniSpeedButton


cdev

Recommended Posts

Hi,

 

I have a large image (250 x 60 pixels) that I want to be displayed an a button without caption. 

So, I put a TUniButton or a TUniSpeedButton on my form an size the button to the same dimensions.

What can I do to avoid that the image is shrunk ? 

Link to comment
Share on other sites

1 hour ago, cdev said:

Hi,

 

I have a large image (250 x 60 pixels) that I want to be displayed an a button without caption. 

So, I put a TUniButton or a TUniSpeedButton on my form an size the button to the same dimensions.

What can I do to avoid that the image is shrunk ? 

Hello

can you please create a test case so we can work on it?

Link to comment
Share on other sites

I made a small test project.

At the left I placed a TUniImage and loaded a 120x120 pixels png-image in the Picture-property.  At the left I placed a TUniBitBtn and loaded the same image in the Glyph-property.  I set the caption := '' as I only want the button to look exactly as the image at the left. 

In design time it looks like this : (which looks as the way I want it)

image.thumb.png.0d5b29a6b0220ba00f6621df23099c61.png

 

In my browser it looks like this:

image.thumb.png.14bbab321d28d9fae187014b8f2933e2.png

 

Enclosed you can find the source files.

 

LargeImageOnButtonProject.7z

Link to comment
Share on other sites

21 minutes ago, cdev said:

LargeImageOnButtonProject.7z 5.3 MB · 0 downloads

Hello,

One possible solution.

1. CustomCSS:

.customIconCls {
    width: 100% !important;
    height: 100%;
}

2. UniBitBtn1 -> ClientEvents -> UniEvents ->

function beforeInit(sender, config)
{
    config.iconCls = 'customIconCls';
}

 

Link to comment
Share on other sites

And you obtain the same results as in my screenshot ?  A button that got larger and the image on the button that got shrunk ?  That is not what I wanted.

The goal is to have a button with the same size as the image on the left, without a shrunk image.  They should look almost equal: the image and the button.

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...