How to align textentries (or set the column width)?

Discuss GUI programming with the RapaGUI plugin here
Post Reply
amyren
Posts: 352
Joined: Thu May 02, 2019 11:53 am

How to align textentries (or set the column width)?

Post 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.
User avatar
airsoftsoftwair
Posts: 5425
Joined: Fri Feb 12, 2010 2:33 pm
Location: Germany
Contact:

Re: How to align textentries (or set the column width)?

Post 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...
amyren
Posts: 352
Joined: Thu May 02, 2019 11:53 am

Re: How to align textentries (or set the column width)?

Post 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.
Image

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:
Image
User avatar
mrupp
Posts: 147
Joined: Sun Jan 31, 2021 7:44 pm
Location: Switzerland
Contact:

Re: How to align textentries (or set the column width)?

Post 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.
amyren
Posts: 352
Joined: Thu May 02, 2019 11:53 am

Re: How to align textentries (or set the column width)?

Post by amyren »

I tried using like this in the xml file

Code: Select all

<text width="20">Etternavn</text>
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.
User avatar
airsoftsoftwair
Posts: 5425
Joined: Fri Feb 12, 2010 2:33 pm
Location: Germany
Contact:

Re: How to align textentries (or set the column width)?

Post 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.
amyren
Posts: 352
Joined: Thu May 02, 2019 11:53 am

Re: How to align textentries (or set the column width)?

Post 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.
User avatar
airsoftsoftwair
Posts: 5425
Joined: Fri Feb 12, 2010 2:33 pm
Location: Germany
Contact:

Re: How to align textentries (or set the column width)?

Post by airsoftsoftwair »

Ok, can you post your actual XML?
amyren
Posts: 352
Joined: Thu May 02, 2019 11:53 am

Re: How to align textentries (or set the column width)?

Post 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 Image
User avatar
airsoftsoftwair
Posts: 5425
Joined: Fri Feb 12, 2010 2:33 pm
Location: Germany
Contact:

Re: How to align textentries (or set the column width)?

Post 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.
Post Reply