Jump to content

Size of Components at Runtime

Recommended Posts

I'm arranging controls at runtime. But I can't seem to puzzle out what the actual size of a control is. I can find what it *says* it is (read the Height property for instance), but that seems to be only a guess or something.

So what am I doing wrong here?

procedure TShowMessageForm.UpdateUI;
  tMetrics: TW3TextMetric;
  padding, border: integer;
  panelWidth, panelHeight, numButtons, buttonWidth, buttonLeft, buttonTotal: integer;
  var CSSHandle := TW3CustomBrowserAPI.GetComputedStylesFor(FMessagePanel.Handle);
  if (CSSHandle) then
    padding := w3_getPropertyAsInt(CSSHandle, 'paddingLeft');
    border := w3_getPropertyAsInt(CSSHandle, 'borderLeft');
    padding := 2;
    border := 2;
  FMessageLabel.Caption := FMessageText;
  tMetrics := FMessageLabel.MeasureText(FMessageText + 'XXX');
  FMessageLabel.SetSize(border + padding + tMetrics.tmWidth + padding + border,
    border + padding + tMetrics.tmHeight + padding + border);
  FMessageLabel.Top := 0;
  FMessageLabel.Left := 0;
  panelWidth := (border + padding) + FMessageLabel.Width + (padding + border);
  panelHeight := (border + padding) + FMessageLabel.Height + (padding + border);
  if ButtonsVisible then
    numButtons := ButtonCount;
    buttonWidth := SizeButtons;
    buttonTotal := (buttonWidth * numButtons) + (padding * (numButtons - 1));
    panelWidth := Max(panelWidth, (padding + border) + buttonTotal + (padding + border));
    buttonLeft := (panelWidth - buttonTotal) div 2;
    if FMessageOKButton.Visible then
      FMessageOKButton.Left := buttonLeft;
      FMessageOKButton.Top := panelHeight + padding;
      Inc(buttonLeft, FMessageOKButton.Width + padding);
    if FMessageCancelButton.Visible then
      FMessageCancelButton.Left := buttonLeft;
      FMessageCancelButton.Top := panelHeight + padding;
      Inc(buttonLeft, FMessageCancelButton.Width + padding);
    panelHeight += FMessageOKButton.Height + padding;
  FMessagePanel.Width := panelWidth;
  FMessagePanel.Height := panelHeight;

I'm guessing I'm going about adding in the padding and border widths wrong.

The buttons are the worst offenders. Just because they *say* their X wide doesn't mean they are. They are *really* X+(some-random-effing-N).

I appreciate any assistance.


Link to post
Share on other sites
  • Administrators

@DavidRM Your code seems to have a lot of calculations about padding. Smart Mobile Studio uses  positionmode pmSmart as default, which means that the RTL takes care of margins and paddings. I made a post about it here:


Edit: Also added a new page to documentation about this: https://smartmobilestudio.com/documentation/getting-started/smart-mobile-studio-box-model-positionmode-margin-border-padding-etc/


I'll be happy to help if you have any questions.

Link to post
Share on other sites

@jarto OK. How do I set the ClientWidth and ClientHeight without calculating all the padding and margins?

For example: I need the ClientWidth of the panel to be wide enough to fit the text of the label. I need the ClientHeight of the panel to be tall enough to fit the label and a row of buttons. And, yes, I would like the current stylesheet to provide the margins and padding between the components.



Link to post
Share on other sites
  • Administrators


  var Btn1:=TW3Button.Create(ParentPanel); Btn1.Caption:='Ok';
  var Btn2:=TW3Button.Create(ParentPanel); Btn2.Caption:='Cancel';
  //Create label but don't give it a size
  var Lab2:=TW3Label.Create(ParentPanel);
  //OnResize will be triggered when we set the label text.
  Lab2.OnResize:=procedure(Sender: TObject)
      //Resize based on label size and add 40 px for button row
      var PHeight:=Lab2.Height+40+ParentPanel.Height-ParentPanel.ClientHeight;
      var PWidth:=Lab2.Width+ParentPanel.Width-ParentPanel.ClientWidth;
      //Resize the buttons
      var BtnWidth:=ParentPanel.ClientWidth div 2;
  Lab2.Caption:='A quick brown fox jumped over the lazy dog!';

So, basically we let the label autosize itself and react to it in OnResize.

Label's Width and Height returns how much space it takes.

When we resize the panel, Width-ClientWidth  (and Height-ClientHeight) returns how much space the padding, margin and border takes.

Link to post
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...