Nifty gui text aligning

Troubleshooting gui
1

Wrong text justification

Hi i am trying to make a stat screen however the stat values 99999 are incorrectly aligned.

Why doesnt nifty support a table container like in html ?

Is there another way to align them correctly ?

[xml]

<panel style=“base_panel” width=“50%” height=“50%” childLayout=“vertical”>

<control name=“AttributeStatIcon” image=“InterfaceiconsailsW_Sword005.png” text="${dialog.strengthShortName}" />

<control name=“AttributeStatIcon” image=“InterfaceiconsailsS_Bow09.png” text="${dialog.dexterityShortName}" />

<control name=“AttributeStatIcon” image=“InterfaceiconsailsE_Gold01.png” text="${dialog.vitalityShortName}" />

<control name=“AttributeStatIcon” image=“InterfaceiconsailsI_Book.png” text="${dialog.intellectShortName}" />

<control name=“AttributeStatIcon” image=“InterfaceiconsailsS_Holy01.png” text="${dialog.healingShortName}" />

<control name=“AttributeStatIcon” image=“InterfaceiconsailsS_Holy02.png” text="${dialog.spiritShortName}" />

<control name=“AttributeStatIcon” image=“InterfaceiconsailsS_Buff04.png” text="${dialog.agilityShortName}" />

<control name=“AttributeStatIcon” image=“InterfaceiconsailsI_Box03.png” text="${dialog.luckShortName}" />

<control name=“AttributeStatIcon” image=“InterfaceiconsailsI_BronzeCoins.png” text="${dialog.increasedGoldShortName}" />

</panel>[/xml]

[xml]

<controlDefinition name=“AttributeStatIcon” value=“99999” padAmount=“5” imageWidth=“24” imageHeight=“24”>

<panel childLayout=“horizontal”>

<image filename="$image" width="$imageWidth" height="$imageHeight"/>

<panel width="$padAmount"/>

<text style=“base_font” text="$text" valign=“center”/>

<panel width="$padAmount"/>

<text style=“base_font” text="$value" valign=“center”/>

</panel>

</controlDefinition>

[/xml]

I managed to align them by making multiple vertical panels however the code is ungly, from 7 code lines it becomes 70.

Correct align

[xml]

<panel style=“base_panel” width=“250” height=“240” childLayout=“horizontal”>

<panel childLayout=“vertical” width=“24” height=“100%”>

<image filename=“InterfaceiconsailsW_Sword005.png” width=“24” height=“24”/>

<panel/>

<image filename=“InterfaceiconsailsS_Bow09.png” width=“24” height=“24”/>

<panel/>

<image filename=“InterfaceiconsailsE_Gold01.png” width=“24” height=“24”/>

<panel/>

<image filename=“InterfaceiconsailsI_Book.png” width=“24” height=“24”/>

<panel/>

<image filename=“InterfaceiconsailsS_Holy01.png” width=“24” height=“24”/>

<panel/>

<image filename=“InterfaceiconsailsS_Holy02.png” width=“24” height=“24”/>

<panel/>

<image filename=“InterfaceiconsailsS_Buff04.png” width=“24” height=“24”/>

<panel/>

<image filename=“InterfaceiconsailsI_Box03.png” width=“24” height=“24”/>

<panel/>

<image filename=“InterfaceiconsailsI_BronzeCoins.png” width=“24” height=“24”/>

</panel>

<panel width=“5”/>

<panel childLayout=“vertical” width=“150” height=“100%” >

<text style=“base_font” text="${dialog.strengthShortName}" valign=“center”/>

<panel />

<text style=“base_font” text="${dialog.dexterityShortName}" valign=“center”/>

<panel/>

<text style=“base_font” text="${dialog.vitalityShortName}" valign=“center”/>

<panel/>

<text style=“base_font” text="${dialog.intellectShortName}" valign=“center”/>

<panel/>

<text style=“base_font” text="${dialog.healingShortName}" valign=“center”/>

<panel/>

<text style=“base_font” text="${dialog.spiritShortName}" valign=“center” />

<panel/>

<text style=“base_font” text="${dialog.agilityShortName}" valign=“center” />

<panel/>

<text style=“base_font” text="${dialog.luckShortName}" valign=“center”/>

<panel/>

<text style=“base_font” text="${dialog.increasedGoldShortName}" valign=“center”/>

</panel>

<panel width=“5”/>

<panel childLayout=“vertical” height=“100%”>

<text style=“base_font” text=“5” valign=“center”/>

<panel/>

<text style=“base_font” text=“5” valign=“center”/>

<panel/>

<text style=“base_font” text=“5” valign=“center”/>

<panel/>

<text style=“base_font” text=“5” valign=“center”/>

<panel/>

<text style=“base_font” text=“5” valign=“center”/>

<panel/>

<text style=“base_font” text=“5” valign=“center”/>

<panel/>

<text style=“base_font” text=“5” valign=“center”/>

<panel/>

<text style=“base_font” text=“5” valign=“center”/>

<panel/>

<text style=“base_font” text=“5” valign=“center”/>

</panel>

</panel>[/xml]

2
Why doesnt nifty support a table container like in html ?


Because no one has written one yet? I'm happily awaiting your patch...

Is there another way to align them correctly ?


Yes! But how should it align or what exactly is wrong? screenshot to explain your issue maybe? should it align vertical? horizontal? centered?

Especially for text elements there are additional align attributes that let you control how text is displayed inside it's panel. There is a dedicated example for this in the nifty-examples project which looks like this:

http://i.imgur.com/h7TH0.png

Maybe this solves the problem already?
1 Like
3

lol my post didnt display the pictures for some reason so it was impossible to read.

I want the text align to be based on all other text elements (but they arent in same panel, so it is impossible to specify which text elements).

I found a workaround to achieve the desired effect :

I changed panel width="$padAmount" to panel width="" and it has the desired appearance.

[xml]

<panel childLayout=“horizontal”>

<image filename="$image" width="$imageWidth" height="$imageHeight" valign=“center”/>

<panel width="$padAmount"/>

<text style=“base_font” text="$text" valign=“center”/>

<panel width=""/>

<text style=“base_font” text="$value" valign=“center”/>

</panel>[/xml]