Jump to content

Center label on panel, wrong X position


Recommended Posts

Dear colleagues,


I placed label on panel and on frame resize i'm sending ajaxevent to panel and server calculates label font size based on panel width and height.

  if EventName='updatePNRouteSize' then

      lblRouteName.Font.Size:=CalcElementFontSize(lblRouteName.Caption,w,h div 4); //OK

After that i'm trying to place label at the top on the panel.

function resize(sender, width, height, oldWidth, oldHeight, eOpts)
  console.log('resize lbl'); 
  console.log(frmTest.pnRoute.getWidth()); //panel width (480)
  console.log((frmTest.pnRoute.getWidth()/2)); //half of panel width (240)
  console.log(frmTest.lblRouteName.getWidth()); //label width (130)
  console.log((frmTest.lblRouteName.getWidth()/2)); //half of label width (65)
  console.log((frmTest.pnRoute.getWidth()/2)-(frmTest.lblRouteName.getWidth()/2)); //label new X coord (175)

In browser i saw strange things:

1. In console it shows that calculations are correct

2. But after frame show the label is placed not in panel center.

3. If i press F12 in browser then the label is placed as it was programmed. After console close the label position doesnt change and shows as needed.


Could you please show me my errors? What i'm missing?


Thank You.


P.S. Of course i can replace label with panel and get the result but because i want to learn more in Unigui and Sencha so i'm trying so.

Link to comment
Share on other sites

  • 1 year later...
40 minutes ago, Sherzod said:


Can you please explain what you wanted?

Of course! As i said, i have a resizable panel on my application with  a label inside him. When i resize the panel in run time i need that the text label resize togheter with the panel.

Link to comment
Share on other sites

One possible solution:

1. CustomCSS:

.textCard {
	text-align: center;
	font-family: 'Bowlby One SC', cursive;
	//font-size: 3.5vw !important;

2. UniLabel1 -> FontSize = 34

3. p1 -> OnResize event:

procedure TMainForm.p1Resize(Sender: TUniControl; OldWidth, OldHeight: Integer);
  UniLabel1.Font.Size := Round(p1.Width * 0.08)


  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...