AutoWidth Button

[picyka]

Hi, How can I adjust the width of a button according to its text?

lNewSpeedButtonResp.Width := Length(lNewSpeedButtonResp.Caption) * 10;

I tried that, but it doesn't work, any tips?

[picyka]

Up!

[Sherzod]

Hello @picyka 

Sorry for the late response. 

Can you describe your case in more detail? Where and when are you trying to set the button width?

[风吹小机机]

On 2/7/2025 at 6:27 PM, picyka said:

Hi, How can I adjust the width of a button according to its text?

lNewSpeedButtonResp.Width := Length(lNewSpeedButtonResp.Caption) * 10;

I tried that, but it doesn't work, any tips?

I also want to know if there is a solution to this problem
There is no automatic width, which is inconvenient for switching between multiple languages
For example, the width of Chinese is 80px, and switching to English requires 130px

[picyka]

2 horas atrás, 风吹小机机 disse:

Também quero saber se existe uma solução para este problema
Não há largura automática, o que é inconveniente para alternar entre vários idiomas
Por exemplo, a largura do chinês é de 80px e mudar para o inglês requer 130px

procedure TUniFormCadAtendimentoAvulsoCheckListResposta.AjustarLarguraBotao(Botao: TUniSpeedButton);
var
  Bmp: TBitmap;
  TextWidth: Integer;
begin
  Bmp := TUniBitmap.Create;
  try
    Bmp.Canvas.Font.Size := Botao.Font.Size;
    Bmp.Canvas.Font.Name := Botao.Font.Name;

    TextWidth := Bmp.Canvas.TextWidth(Botao.Caption);
    Botao.Width := TextWidth + 44;
  finally
    Bmp.Free;
  end;
end;

I used this function generated by chatGpt, it doesn't seem like the best of both worlds, but it worked fine in the tests I did.

[Sherzod]

Well, an approximate solution has already been posted on the forum. Although I think it might be better to implement the solution on the client side...

 

[picyka]

1 hora atrás, Sherzod disse:

Bem, uma solução aproximada já foi postada no fórum. Embora eu ache que pode ser melhor implementar a solução no lado do cliente ...

 

Thanks for the answer, yes, it was a solution similar to the one I used.

[Sherzod]

@picyka

A more correct solution:

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  UniButton1.JSInterface.JSProperty('width', [Null])
end;

 

[picyka]

On 2/13/2025 at 4:55 AM, Sherzod said:

@picyka

A more correct solution:

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  UniButton1.JSInterface.JSProperty('width', [Null])
end;

 

Good morning, the button is created at runtime, I tested the code and it has no effect.

 

function TUniFormCadAtendimentoCheckListResposta.NewButtonResposta(Container: TUniContainerPanel; Registro : TRegistroDTO; Resposta: TCheckListAtendimentoPerguntaResposta; Left, Top : Integer): TUniSpeedButton;
begin
  var lNewSpeedButtonResp := TUniSpeedButton.Create(Container);
  lNewSpeedButtonResp.Images := UniMainModule.UniNativeImageList1;
  lNewSpeedButtonResp.Parent := Container;
  lNewSpeedButtonResp.Images := UniMainModule.UniNativeImageList1;

  if Resposta = nil then
    lNewSpeedButtonResp.Caption := 'NÃO INFORMADO'
  else
  begin
    lNewSpeedButtonResp.Caption := Resposta.Resposta;
    lNewSpeedButtonResp.Tag := Resposta.Id;
  end;

  lNewSpeedButtonResp.Top := Top;
  lNewSpeedButtonResp.Left := Left;
  lNewSpeedButtonResp.Height := 29;

  lNewSpeedButtonResp.JSInterface.JSConfig('cls', ['button-checklist']);
  lNewSpeedButtonResp.Data := Registro;
  lNewSpeedButtonResp.OnClick := Self.MyRespostaItemClick;
  //lNewSpeedButtonResp.AjustWidthCaption;
  lNewSpeedButtonResp.Hint := 'Opção de resposta';
  lNewSpeedButtonResp.ShowHint := True;
  Result := lNewSpeedButtonResp;

  Result.JSInterface.JSProperty('width', [Null]);
end;

 

[picyka]

This is my screen, my function doesn't work well yet

 

procedure TUniSpeedButtonHelper.AjustWidthCaption;
begin
  var Bmp := TUniBitmap.Create;
  try
    Bmp.Canvas.Font.Size := Self.Font.Size;
    Bmp.Canvas.Font.Name := Self.Font.Name;

    var TextWidth := Bmp.Canvas.TextWidth(Self.Caption);
    Self.Width := TextWidth + 44;
  finally
    Bmp.Free;
  end;
end;

 

[picyka]

For my logic to work well today, the size adjustment would have to be on the server.

[picyka]

I'm going to change the way I generate, leave this topic OFF

[Sherzod]

52 minutes ago, picyka said:

For my logic to work well today, the size adjustment would have to be on the server.

Yes, this is one of the solutions, it's up to you.

 

2 hours ago, picyka said:

JSInterface.JSProperty('width', [Null]);

But for dynamically created buttons you can also use the following method:

UniButton1.JSInterface.JSAddListener('afterrender', 'function(){this.setWidth(null)}');

 

[风吹小机机]

On 2/14/2025 at 8:23 PM, Sherzod said:

Yes, this is one of the solutions, it's up to you.

 

But for dynamically created buttons you can also use the following method:

UniButton1.JSInterface.JSAddListener('afterrender', 'function(){this.setWidth(null)}');

 

If the layout is set to left, the layout becomes invalid
As shown in the picture

Can't send the picture, attachment 29KB, is there any mistake

[Sherzod]

1 hour ago, 风吹小机机 said:

Can't send the picture, attachment 29KB, is there any mistake

It looks like you have reached the attachment limit. Can you delete unnecessary attachments?

[风吹小机机]

This problem has been perfectly solved

procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
var
  i : integer;
begin
  ....
  //设置自动宽度
  btUnAudit.ClientEvents.UniEvents.Values['afterCreate'] := ' function afterCreate(sender) {'
                                                          + '   sender.setWidth(null);'
                                                          + ' }';                      
  //获取实际宽度后再
  btUnAudit.ClientEvents.ExtEvents.Values['afterrender'] := ' function afterrender(sender, eOpts){'
                                                          + '   ajaxRequest(sender,''afterrender'',[''Width='' + sender.getWidth()]);' 
                                                          + ' }';
end;

procedure btUnAuditOnAjaxEvent(sender: tcomponent;eventname: string;params: tunistrings);
begin
  if eventname = 'afterrender' then
  TUgButton(sender).Width := params.Params['Width'].AsInteger(TUgButton(sender).Width);
end;