How to autosize a list

[Duggan]

I'm sure I'm missing something simple here. I have about 30 skills in 4 categories. I want to display those separately on the Skills tab, and have their height set to display all of the items on the list. Here are two of the portals:

<portal
id="skMSkills"
style="tblNormal">
<table_fixed component="Skill" showtemplate="skPick"
scrollable="no">
<list><![CDATA[
Skills.Mental
]]></list>
<headertitle>
@text="Mental Skills"
</headertitle>
</table_fixed>
</portal>

<portal
id="skSSkills"
style="tblNormal">
<table_fixed component="Skill" showtemplate="skPick"
scrollable="no">
<list><![CDATA[
Skills.Social
]]></list>
<headertitle>
@text="Social Skills"
</headertitle>
</table_fixed>
</portal>

Each displays about 5 items. If I add scrollable, I can view all of the items, but only by scrolling. I can set the height manually, but I'd prefer not to have a hard-coded value in case the user decides to add skills via the editor. What's the easiest way to set the height of a portal with a fixed table of entries?

[Duggan]

Ah. Found an easy way. Ran Autoplace on each item, then moved them.

perform portal[skCSkills].autoplace
perform portal[skPSkills].autoplace
perform portal[skMSkills].autoplace
perform portal[skSSkills].autoplace

portal[skCSkills].left = 0
portal[skCSkills].width = width / 2 - 5

portal[skMSkills].left = portal[skCSkills].width + 5
portal[skMSkills].top = 0
portal[skMSkills].width = width / 2 - 5

portal[skPSkills].left = 0
portal[skPSkills].top = maximum(portal[skCSkills].bottom, portal[skMSkills].bottom) + 15
portal[skPSkills].width = width / 2 - 5

portal[skSSkills].left = portal[skCSkills].width + 5
portal[skSSkills].top = maximum(portal[skCSkills].bottom, portal[skMSkills].bottom) + 15
portal[skSSkills].width = width / 2 - 5

[Mathias]

Actually, let me give you the newer code that hasn't made its way to the wiki yet.

autogap =  10

perform portal[skCSkills].batchadd
perform portal[skPSkills].batchadd
perform portal[skMSkills].batchadd
perform portal[skSSkills].batchadd

perform batchplace

height = autotop

[Mathias]

That will automatically place all the portals that are loaded into the batch, trying to give each one a reasonable fraction of the available vertical space, but not more than their own height needs - none will get less than 2 or 3 items showing at a time, so that there's a visible scrollbar that the user can manipulate (unless you give HL more portals than will actually fit in the available space, so that everything has to be squished).

Note that the autogap = 10 line is redundant, because the autogap defaults to 10. Each batchadd has an implied batchadd[autogap] to tell HL how big a space you want above this portal, if anything else is above this portal, but you can also specify different numbers on a portal-by-portal basis: batchadd[15], for example.

[Duggan]

I considered batchadd. I found its page, but I had no code, and so I just sort of winged it.

[Duggan]

I've set up the batch add as follows (commented out code at the bottom was the autosizing code):

<?xml version="1.0" encoding="UTF-8"?>

<!-- This file contains the definition of the "Skills" tab panel. This tab is where
the user selects the skills for the character.

All public visual elements used with this tab panel start with the prefix "sk"
to associate them with the tab.
-->

<document signature="Hero Lab Data">


<!-- skSkills portal
Presents a fixed table where the user can adjust skills for the
character.
-->
<portal
id="skCSkills"
style="tblNormal"
height="0">
<table_fixed component="Skill" showtemplate="skPick"
scrollable="yes">
<list><![CDATA[
Skills.Combat
]]></list>
<headertitle>
@text="Combat Skills"
</headertitle>
</table_fixed>
</portal>

<portal
id="skPSkills"
style="tblNormal">
<table_fixed component="Skill" showtemplate="skPick"
scrollable="yes">
<list><![CDATA[
Skills.Physical
]]></list>
<headertitle>
@text="Physical Skills"
</headertitle>
</table_fixed>
</portal>

<portal
id="skMSkills"
style="tblNormal">
<table_fixed component="Skill" showtemplate="skPick"
scrollable="yes">
<list><![CDATA[
Skills.Mental
]]></list>
<headertitle>
@text="Mental Skills"
</headertitle>
</table_fixed>
</portal>

<portal
id="skSSkills"
style="tblNormal">
<table_fixed component="Skill" showtemplate="skPick"
scrollable="yes">
<list><![CDATA[
Skills.Social
]]></list>
<headertitle>
@text="Social Skills"
</headertitle>
</table_fixed>
</portal>

<template
id="skPick"
name="Skill Pick"
compset="Skill"
marginhorz="3"
marginvert="2">

<portal
id="value"
style="incrSimple">
<incrementer
field="trtUser">
</incrementer>
<mouseinfo mousepos="middle+above"><![CDATA[
if (hero.tagis[mode.creation] = 0) then
@text = "Skills must be modified via the Advances tab once the character is locked for play."
elseif (autonomous = 0) then
@text = "This trait has been improved via the Advances tab and cannot be modified further from here."
else
@text = "Allocate points to this skill by clicking on the arrows to increase/decrease the number of points assigned."
endif
]]></mouseinfo>
</portal>

<portal
id="name"
style="lblSmall"
showinvalid="yes">
<label
field="name">
</label>
</portal>

<portal
id="info"
style="actInfo">
<action
action="info">
</action>
<mouseinfo mousepos="middle+above"/>
</portal>

<portal
id="specialty"
style="actOvalSm"
tiptext="Click to add specialties">
<action
action="form"
form="tacManip">
</action>
</portal>

<position><![CDATA[
~set up our height based on our tallest portal
height = portal[info].height

~if this is a "sizing" calculation, we're done
if (issizing <> 0) then
done
endif

~position our tallest portal at the top
portal[info].top = 0

~position the other portals vertically
perform portal[name].centervert
perform portal[value].centervert
perform portal[specialty].centervert

~position the specialty portal on the far right
perform portal[specialty].alignedge[right,0]

~position the info portal to the left of the specialty button
perform portal[info].alignrel[rtol,specialty,-8]

~position the incrementer on the left
portal[value].left = 0

~position the name next to the incrementer
perform portal[name].alignrel[ltor,value,10]

portal[name].width = minimum(portal[name].width,portal[info].left - portal[name].left - 10)

]]></position>
</template>

<layout
id="skills">
<portalref portal="skCSkills" taborder="10"/>
<portalref portal="skPSkills" taborder="20"/>
<portalref portal="skMSkills" taborder="30"/>
<portalref portal="skSSkills" taborder="40"/>
<position><![CDATA[
~freeze our table in advancement mode to disable adding new choices
~Note: All freezing must be done *before* any positioning is performed.
if (state.iscreate = 0) then
portal[skCSkills].freeze = 1
portal[skPSkills].freeze = 1
portal[skMSkills].freeze = 1
portal[skSSkills].freeze = 1
endif

perform portal[skCSkills].batchadd
perform portal[skPSkills].batchadd
perform portal[skMSkills].batchadd
perform portal[skSSkills].batchadd

perform batchplace

height = autotop

~ perform portal[skCSkills].autoplace
~ perform portal[skPSkills].autoplace
~ perform portal[skMSkills].autoplace
~ perform portal[skSSkills].autoplace

~ portal[skCSkills].left = 0
~ portal[skCSkills].top = 0
~ portal[skCSkills].width = width / 2 - 5
~
~ portal[skMSkills].left = portal[skCSkills].width + 5
~ portal[skMSkills].top = 0
~ portal[skMSkills].width = width / 2 - 5
~
~ portal[skPSkills].left = 0
~ portal[skPSkills].top = maximum(portal[skCSkills].bottom, portal[skMSkills].bottom) + 15
~ portal[skPSkills].width = width / 2 - 5
~
~ portal[skSSkills].left = portal[skCSkills].width + 5
~ portal[skSSkills].top = maximum(portal[skCSkills].bottom, portal[skMSkills].bottom) + 15
~ portal[skSSkills].width = width / 2 - 5

]]></position>
</layout>

<panel
id="skills"
name="Skills"
marginhorz="5"
marginvert="5"
order="120">
<live>!HideTab.skills</live>
<layoutref layout="skills"/>
<position><![CDATA[
]]></position>
</panel>
</document>

Except, I'm getting an odd glitch for the first table. It stays like this until I click on the table a few times in different places.

[Mathias]

Why the height="0" line in the third line of that portal? You don't have that line on the other portals, so I'd see if that's what's causing the weird behavior.

[Duggan]

Originally Posted by Mathias

Why the height="0" line in the third line of that portal? You don't have that line on the other portals, so I'd see if that's what's causing the weird behavior.

Hmm... It was probably an attempt to get the panel to "size to fit". I removed it, but I get the same result.

It kind of looks like another table overlaying it. If you look at the right-hand side, you can see where the "real" table is sticking out, and if I click on the info button areas to make them show up, it's out of sync with the lines. If I reveal parts of the table by clicking on them, I can usually also make all of them go away and show that blank list by clicking into certain parts of the empty space. This overlay does not happen if I only add one item. It does happen if I add two. Also, no matter what order I do the Batchadd, it's always the first table that gets it.

While fiddling around with adding the tables more manually, I also have once or twice had that first table show up with no lines, and not obscured, but if I click in, the lines appear. I don't know what that might mean.

[Mathias]

I'd look in other files - see if there's any other visual elements related to skills or the skills layout that could be interfering with this.

I can't see anything else that looks odd about this.

Try setting the visibility of each portal to 0 before the batchadd
portal[skCSkills].visible = 0

That way, perhaps whatever's behind all this will become visible, which will hopefully help you find it.

[Duggan]

Setting them all to not be visible results in a blank page. Making any one of them visible still causes no problems. Add 2 and the batchadd results in the issue. I tried manually arranging them in height order by changing the "top" value and it worked fine, but only if I had an offset of at least 3 pixels. That led me to re-add the "redundant" autogap statement back in and that that fixes it. Somehow, the autogap was starting as 0.

So, problem solved, and we may have both learned something from this. If I were to bet, there's probably something to do with the selection outline, but that's sort of spitballing it because I don't know how your code works.