Recent

Author Topic: [solved] How to control alignment with multi-language?  (Read 1147 times)

piola

  • Full Member
  • ***
  • Posts: 118
  • Lazarus 2.2, 64bit on Windows 8.1 x64
[solved] How to control alignment with multi-language?
« on: April 04, 2022, 02:49:41 pm »
Hello,

I have read many tutorials about creating multi-language applications, but I haven't found anything about the following issue which (at least to me) is a problem especially for option dialogs.

See screenshot attached: In English, the descriptions have certain lengths. The input fields are anchored to the longest text. No problem so far; but when switching to a different language, the longest description might be a different one so that the anchors of the input fields might have to be other labels.

What is the best practice to handle this situation?
« Last Edit: May 02, 2022, 01:35:25 pm by piola »

howardpc

  • Hero Member
  • *****
  • Posts: 4144
Re: How to control alignment with multi-language?
« Reply #1 on: April 04, 2022, 03:17:07 pm »
I wouldn't vaunt it as best practice, but one simple approach (which relies on LCL code rather than roll-your-own) is to make use of the container control's ChildSizing properties.

wp

  • Hero Member
  • *****
  • Posts: 11830
Re: How to control alignment with multi-language?
« Reply #2 on: April 04, 2022, 04:39:52 pm »
Howard was faster, but I'd recommend the ChildSizing, too. It is one of the least used features of the LCL, but extremely powerful when it comes to automatic flexible layouts:

The attached project does about what you need. No code lines - all done in object inspector... But I am describing here the steps taken:
  • Add a panel
  • Put the labels and spinedits into the panel - no exact placement needed, roughly from left to right and top to bottom as a guide for you how much you've already added. Do not apply any Align or Anchoring settings.
  • Select all the labels (using SHIFT+Click) and set their Alignment to taRightJustify and their Layout to clCenter.
  • Select the panel and go to its ChildSizing property.
  • Set ChildSizing.ControlsPerLine to 4 (two groups of label+edit pairs per row)
  • Set ChildSizing.Layout = cclLeftToRigthThenTopToBottom
  • Set ChildSizing.EnlargeHorizontal = crsHomogenousChildResize
  • Set ChildSizing.ShrinkHorizontal = crsHomogenousChildResize
  • Set ChildSizing.HorizontalSpace = 8 (or whatever value you want as distance between label and edit)
  • To occupy the minimum space, set the panel's AutoSize to true. The edit controls may shrink too much - set their Constraints.MinWidth to the width required.
  • If you later want to add other controls just drop them on the panel - the ChildSizing will move them to the end of the control list. If you want the new control at another place use the "Z order" command from the context menu. If you want a "empty slot" add a label and clear its caption.

piola

  • Full Member
  • ***
  • Posts: 118
  • Lazarus 2.2, 64bit on Windows 8.1 x64
Re: How to control alignment with multi-language?
« Reply #3 on: April 05, 2022, 10:54:53 am »
Thank you both for the advice. I had tried ChildSizing some time ago and rember having had some problems, but maybe I had done something wrong. I will try again and report.

piola

  • Full Member
  • ***
  • Posts: 118
  • Lazarus 2.2, 64bit on Windows 8.1 x64
Re: How to control alignment with multi-language?
« Reply #4 on: April 12, 2022, 09:28:07 pm »
Okay, I now remember what's not working when using ChildSizing: the parent's auto-sizing.

I tried what you suggested. Because of the different spacings (small spacing between label and spinedit, larger spacing between the two columns) I have placed:

- a panel "PanelAll" for the whole options group
- inside this panel, two panels "PanelLeft" and "PanelRight" for the two columns

PanelAll has ChildSizing.ControlsPerLine=2. PanelLeft also has ControlsPerLine=2, but PanelRight has ControlsPerLine=3.

With crsHomogenousChildResize, the labels on the left get truncated (left image). With crsHomogenousSpaceResize or crsAnchor aligning, the label on the right gets truncated (right image).

Everything is placed on a PageControl having AutoSize=true. All panels have AutoSize=true. So my expectation is that nothing should be truncated at all because the min width should be the width of the included children.

wp

  • Hero Member
  • *****
  • Posts: 11830
Re: How to control alignment with multi-language?
« Reply #5 on: April 12, 2022, 10:29:33 pm »
I modified my example following this idea (lower panel in the attached project), and nothing is truncated. Doing it correctly is a bit tricky, based on AutoSize and using Constraints (because unrestricted AutoSize may slash controls to zero size).

The problem with a panel for each column is that it may become difficult to vertically align the controls between the panels. Therefore, I'd prefer to stick to the old concept of my previous post. In order to control the extra spacing between the "columns" I'd add a bevel for each row and move it, using CTRL+PgUp/Down, to the correct position. Since a bevel does not have an autosize it is hard to control its size within the childsizing parent (by default it is too high). Therefore, I set Constraints.MaxHeight to something smaller than the row height (e.g. 10), and Constraints.MaxWidth to the value needed for the extra spacing. Finally set Bevel.Shape to bsSpacer to make it invisible (I did not do this in the attached project (upper panel) in order to show the concept).

piola

  • Full Member
  • ***
  • Posts: 118
  • Lazarus 2.2, 64bit on Windows 8.1 x64
Re: How to control alignment with multi-language?
« Reply #6 on: May 02, 2022, 01:35:10 pm »
This is working well 👍 Thank you!

 

TinyPortal © 2005-2018