Page 1 of 1
How to align textentries (or set the column width)?
Posted: Sat Apr 17, 2021 1:19 pm
by amyren
I have set up a group of 4 columns, folled by a 2 column group, and then another 4 column group. All rows starts with a label field of various widths, then a textentry. How can I get those textentries in the different column sets to get aligned?
I tried by adding width="100" to some of the labels, like
Code: Select all
<label width="100">ZIP code</label>
That did not have any effect, so I guessing I was either using the wrong syntax or I was putting that in the wrong place.
And I also would like to be able to set the width of textenties, eg. if I have Zip code and City in the same row I would like to have more space for the latter.
Re: How to align textentries (or set the column width)?
Posted: Sat Apr 17, 2021 4:45 pm
by airsoftsoftwair
Can you post a screenshot for illustration? It's hard to imagine what the exact problem is here from just reading about your layout. Those things are easier to grasp when visualized...
Re: How to align textentries (or set the column width)?
Posted: Sat Apr 17, 2021 6:58 pm
by amyren
I wanted the text labels to the left to be set to a specific width, so that the next textentries would become aligned
Also I wanted to set the width of the "Postnr" to a smaller width than the "Sted"
Here is an image of the misaligned entries.
I did a workaround here now. To avoid the problem I did put the text labels on separate rows so they apear above the textentry.
But I would still like to know how I could align the above image if I wanted that layout.
Image of the workaround layout:
Re: How to align textentries (or set the column width)?
Posted: Mon Apr 19, 2021 5:49 pm
by mrupp
I’m not at my computer right now, so I can’t try it out, but you could try to use <text> instead of <label>, that might help. If I remember correctly, <label> always takes its width from the text it contains, whereas <text> can be sized and stretched.
Re: How to align textentries (or set the column width)?
Posted: Mon Apr 19, 2021 6:28 pm
by amyren
I tried using like this in the xml file
I am not sure what effect the width setting really is applying, or if it is supposed to be used like this.
Using text without setting any width will make the text use more space than uning label. Specially at the rows with only two columns
Trying to shrink the text space using the width attribute and it will change the sacing a little, but even setting it to 0 will take more space than a label on a 2 colums row. I tried various values, even negative ones. At -1 it is similar to 0, but at -2 the text will vanish completely.
Re: How to align textentries (or set the column width)?
Posted: Sat Apr 24, 2021 2:57 pm
by airsoftsoftwair
The best idea is to use a
Colgroup for this. See the "Dialogs" sample that comes with RapaGUI. When you click "Add" or "Edit" in that sample, you'll see a layout very similar to yours. It uses a colgroup to align the labels.
Re: How to align textentries (or set the column width)?
Posted: Sat Apr 24, 2021 4:36 pm
by amyren
I do use colgroup for this.
The dialogs example is only using one colgroup, so they would be perfectly aligned.
The misalignment happens when using multiple colgroups with different number of columns.
Eg first a colgroup using 4 columns, then 2 columns, followed by a colgroup with 4 columns.
The two groups with 4 columns will not be alligned with each other, and certainly not aligned with the 2 column group.
All these colgroups begings with a label to the left, followed by a textentry. It is these textentries at I wanted to be allinged for all colgroups.
Re: How to align textentries (or set the column width)?
Posted: Sun Apr 25, 2021 5:51 pm
by airsoftsoftwair
Ok, can you post your actual XML?
Re: How to align textentries (or set the column width)?
Posted: Sun Apr 25, 2021 8:22 pm
by amyren
Here is the XML I was using at the time I posted the question. (have redesigned since then as a workaround)
Another question I have been wondering, what do I need to do with it if I want this dialog window to be resizeable?
Code: Select all
<?xml version="1.0" encoding="iso-8859-1"?>
<dialog id="dlg" title="Legg til" width="500">
<vgroup>
<colgroup columns="4">
<label width="80">Etternavn</label>
<textentry id="Etternavn"/>
<label width="80">Fornavn</label>
<textentry id="Fornavn"/>
</colgroup>
<colgroup columns="2">
<label>Adresse</label>
<textentry id="Adresse"/>
</colgroup>
<colgroup columns="4">
<label>Postnr</label>
<textentry id="Postnr" accept="0123456789"/>
<label>Sted</label>
<textentry id="Sted"/>
</colgroup>
<colgroup columns="4">
<label>F.dato</label>
<textentry id="F.dato" accept="0123456789."/>
<label>Klasse</label>
<textentry id="Klasse"/>
</colgroup>
<colgroup columns="4">
<label>Deltatt</label>
<textentry id="Deltatt" accept="0123456789;"/>
<label>Antall</label>
<textentry id="Antall"/>
</colgroup>
<colgroup columns="2">
<label>Kommentar</label>
<textentry id="Kommentar"/>
</colgroup>
<hgroup>
<button id="ok">OK</button>
<button id="cancel">Avbryt</button>
</hgroup>
</vgroup>
</dialog>
Here is an example (mockup picture) of how it might have looked like if I could adjust everything
Re: How to align textentries (or set the column width)?
Posted: Sun May 02, 2021 7:24 pm
by airsoftsoftwair
Here's how you can do what you want:
Code: Select all
<?xml version="1.0" encoding="iso-8859-1"?>
<dialog id="dlg" title="Legg til" width="500" sizegadget="true">
<vgroup>
<colgroup columns="4">
<text width="80" fixwidth="true">Etternavn</text>
<textentry id="Etternavn"/>
<text width="40" fixwidth="true">Fornavn</text>
<textentry id="Fornavn"/>
</colgroup>
<hgroup>
<text width="80" fixwidth="true">Adresse</text>
<textentry id="Adresse"/>
</hgroup>
<colgroup columns="4">
<text width="80" fixwidth="true">Postnr</text>
<textentry id="Postnr" accept="0123456789"/>
<text width="40" fixwidth="true">Sted</text>
<textentry id="Sted"/>
<text width="80" fixwidth="true">F.dato</text>
<textentry id="F.dato" accept="0123456789."/>
<text width="40" fixwidth="true">Klasse</text>
<textentry id="Klasse"/>
<text width="80" fixwidth="true">Deltatt</text>
<textentry id="Deltatt" accept="0123456789;"/>
<text width="40" fixwidth="true">Antall</text>
<textentry id="Antall"/>
</colgroup>
<hgroup>
<text width="80" fixwidth="true">Kommentar</text>
<textentry id="Kommentar"/>
</hgroup>
<hgroup>
<button id="ok">OK</button>
<button id="cancel">Avbryt</button>
</hgroup>
</vgroup>
</dialog>
But I wouldn't do it like that because it involves hard-coding a fixed width for the labels which is of course not a good idea because there might be different fonts or font sizes so there's no guarantee that it will look correct everywhere. I would change the layout into something that easily fits into a clear column layout instead. In your layout, the "Adresse" and "Kommentar" rows rip the rest of the layout apart so I wouldn't do that.
Concerning dialog sizability: Dialogs are non-sizable by default, so you need to set the
Window.SizeGadget attribute to TRUE to create a sizable dialog.