adjust caption on tunibutton

[delagoutte]

I have a tunibutton on a panel. this button is anchor on right and left.

When i decrease my panel size my  button size width is decrease.

If the caption is too long for the button, i would like  the caption to be written on 2 lines or that the font size decrease automaticly. 

Is it possible to do that ?

[mika]

I've solved this by modifying css of the button manually in code. However, it would be very nice feature to achieve this by simply setting property like 'AutoWrap' to true.

[delagoutte]

Could you give me the code that you produce for do it ?

[mhmda]

CSS: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

[Sherzod]

Hi,

 

I think here you need to consider the length of the caption, the width of the button, and depending on this to change some properties of css: "line-height", "white-space"

[delagoutte]

Sorry , I'm not used to working with css and js

 

So i try this :

Custom Css : 

.wrap-button .x-button-label {
  word-wrap: break-word;
}

and on my button :

function beforeInit(sender, config)
{
  config.cls="wrap-button";
}

But it don't work.

Am i on the good way ?

[mhmda]

Test case???   Image?? give us something to help you 

[delagoutte]

Attach to this message a small project test 

On start

if i move the splitter to left i have

but i would :

button wrap.rar

[Sherzod]

Hi,

 

One possible solution I think, can you try to use this approach for now ?!

 

UniButton1 -> ClientEvents -> ExtEvents -> function resize:

function resize(sender, width, height, oldWidth, oldHeight, eOpts)
{
    var me = sender.btnInnerEl;
    var tm = new Ext.util.TextMetrics();
    var lineHeight = parseInt(me.getStyle("line-height"));
    
    if (tm.getSize(sender.text).width >= width + 25) {
        me.setStyle("line-height", lineHeight / 2 + "px");
        me.setStyle("white-space", "normal");
    } else {
        me.setStyle("white-space", "nowrap");
    };       
}

Best regards.

[delagoutte]

thanks but it  not work

[GerhardV]

What Delphi Developer advised does work, I have tested it...see attachment.

[GerhardV]

Here is a modified version of Delphi Developer's solution which scales the number of lines dynamically...obviously there is only so much space to fit eventually.

function resize(sender, width, height, oldWidth, oldHeight, eOpts)
{
    var me = sender.btnInnerEl;
    var tm = new Ext.util.TextMetrics();
    var lineHeight = parseInt(me.getStyle("line-height"));
    var textWidth = tm.getSize(sender.text).width;   
    
    if (textWidth >= width + 25) {         
        me.setStyle("line-height", lineHeight / Math.ceil(textWidth/width) + "px");
        me.setStyle("white-space", "normal");
    } else {
        me.setStyle("white-space", "nowrap");
    };       
}

[delagoutte]

Ok,

excuse me delphi developer. it work in the sample.

Thanks GerhardV

it not work in my main project.

In my main project the button is in a uniframe and the frame is assigned to the left panel. I'll investigate and i don't find, i'll come bak with a new sample.

Thanks for all

[Sherzod]

Hi,

 

You can use with Ext.defer for example

 

Best regards.

[Sherzod]

function resize(sender, width, height, oldWidth, oldHeight, eOpts)

{

    var me = sender.btnInnerEl;

    var tm = new Ext.util.TextMetrics();

    var lineHeight = parseInt(me.getStyle("line-height"));

   

    if (tm.getSize(sender.text).width >= width + 25)

    {        

      Ext.defer(function() {

          me.setStyle("line-height", lineHeight / 2 + "px");

          me.setStyle("white-space", "normal");

      }, 50);

    }

    else

    {

      me.setStyle("white-space", "nowrap");

    };       

}

[delagoutte]

thanks a lot.

it's ok with ext.defer

[SergioGarcia]

can you give the complete example? I can not get it to work

 

thk!

[NelsonFS]

try just add in ServerModule.CustomCSS:

.x-btn-button {
  white-space: normal;
  word-wrap: break-word;
}

 

[NelsonFS]

other solution.. in ExtEvents:

function afterrender(sender, eOpts)
{
   sender.btnInnerEl.setStyle('white-space', 'normal');
}