Shoutbox

I've managed to do this before, but for some reason the alignement messes up, I recently started over.

I have this piece of code, from Open Live:

code:

---

<Element resid=Scrollbar/>
<MsgrGroupElement ResID=GroupTemplate Sheet=styleref(clss) id=atom(GroupTemplate) Layout=BorderLayout() AccName=bind(property:"Name") AccDesc=bind(property:".";transform:120) AccValue=bind(property:".";transform:120) Tooltip=true AccState=bind(property:"GroupCollapsed";transform:195;default:512)>
    <Element id=atom(listitem) Class="group" LayoutPos=Top Layout=FlowLayout(0,0,0,3) MinSize=Size(0,18)>
        <Element id=atom(itemiconcont) Layout=VerticalFlowLayout(0,2,2,2) MinSize=Size(0,19)>
            <Element class="ExpandCollapseIcon" ContentIndex=bind(property:"GroupCollapsed";transform:113;default:0)/>
        </Element>
        <Element id=atom(GroupNameContainer) Layout=FlowLayout(0,2,0,2)>
            <LabelRichEdit id=atom(GroupName) Content=bind(property:"Name") Active=Inactive/>
            <Element id=atom(GroupCountContainer) Layout=FlowLayout(0,2,0,2) foreground=rcclr(59529) Visible=bind(property:"Members";transform:115;default:true)>
                <Element ID=Atom(ai562)/>
                <Element id=atom(onlinecountcontainer) Layout=FlowLayout(0,2,0,2)Visible=bind(property:"HideOnlineCount";transform:108;default:true)>
                    <Element Content=bind(property:"Online";transform:101)/>
                    <Element ID=Atom(ai563)/>
                </Element>
                <Element Content=bind(property:"Members";transform:101)/>
                <Element ID=Atom(ai564)/>
            </Element>
        </Element>
    </Element>
</MsgrGroupElement>
<ContactElement ResID=UITextTemplate Sheet=styleref(clss) id=atom(UITextTemplate) Layout=BorderLayout() AccName=bind(property:"UIText") AccRole=41 Active=Keyboard>
    <Element id=atom(listitem) LayoutPos=Client Layout=FlowLayout(0,0,0,3)>
        <Element Layout=FlowLayout(0,2,0,2) MinSize=Size(0,18) Padding=Rect(14,0,0,0)>
            <EmoticonText id=atom(itemname) Content=bind(property:"UIText") AccDesc=bind(property:".";transform:122)/>
        </Element>
    </Element>
</ContactElement>
<ContactElement ResID=WordWheelTextTemplate Sheet=styleref(clss) id=atom(WordWheelTextTemplate) Layout=BorderLayout() AccName=bind(property:"UIText") AccRole=41 Active=Keyboard>
    <Element id=atom(listitem) LayoutPos=Client Layout=FlowLayout(0,0,0,3)>
        <Element Layout=FlowLayout(0,2,0,2) MinSize=Size(0,18) Padding=Rect(14,0,0,0)>
            <EmoticonText id=atom(itemname) Content=bind(property:"UIText") Class="WordWheelText"/>
        </Element>
    </Element>
</ContactElement>
<Button ResID=AlertListItemTemplate Sheet=styleref(clss) id=atom(AlertListItemTemplate) AccName=bind(property:"UIText") AccDesc=bind(property:".";transform:122) AccRole=41 CmdID=50098 CmdGroup=guid("{102a0bf5-44ec-4a0a-b5d7-54228fa20952}") LayoutPos=Client Layout=FlowLayout(0,0,0,3) Padding=Rect(5,0,0,0) BorderThickness=Rect(0,0,0,1)>
    <Element ID=Atom(ai565)/>
    <Element ID=Atom(ai566)/>
    <Element id=atom(alertItem) Content=bind(property:"UIText")/>
</Button>
<MsgrContactElement ResID=BuddyTemplate Sheet=styleref(clss) id=atom(BuddyTemplate) Class=bind(property:".";transform:124;default:"Light") Layout=FillLayout() AccName=bind(property:".";transform:130) AccDesc=bind(property:".";transform:119) AccValue=bind(property:".";transform:130) Tooltip=true>
    <Element id=atom(listitem) Layout=BorderLayout() Padding=Rect(17,0,0,3)>
        <Element LayoutPos=Left Layout=VerticalFlowLayout(0,0,0,2)>
            <Element Layout=FillLayout() ID=Atom(ai567)>
               
                <CmdButton id=atom(itemiconcont) padding=rect(1,0,0,0) Layout=FillLayout() Active=Mouse>
               
                   
                    <element layoutpos=auto layout=filllayout() id=atom(idUserTileArea)>
                   
                        <element layout=filllayout() id=atom(idUserTileVisibility) padding=rect(0,0,0,0) visible=true>
                            //<element layout=filllayout() padding=rect(8,8,12,12) id=atom(idUserTileContainer) class="Tiny">
                            //<element layout=filllayout() id=atom(idUserTileContainer2)>
                            //<element layout=filllayout() id=atom(idUserTileContainer) class="Small">
                            //<element layout=filllayout() id=atom(idUserTileContainer) class="Medium">
                            <element layout=filllayout() id=atom(idUserTileContainer) class="Full">
                                //<usertileview SizeId=small tooltip=true Accessible=true AccRole=40 UserTileStyle=CacheOnly Active=Inactive Email=bind(property:".";transform:127;default:" ") IsBuddy=bind(property:".";transform:126)/>
                                //<usertileview margin=rect(3,3,0,0) SizeId=tiny tooltip=true Accessible=true AccRole=40 UserTileStyle=CacheOnly Active=Inactive Email=bind(property:".";transform:127;default:" ") IsBuddy=bind(property:".";transform:126)/>
                                //<usertileview SizeId=small tooltip=true Accessible=true AccRole=40 UserTileStyle=CacheOnly Active=Inactive Email=bind(property:".";transform:127;default:" ") IsBuddy=bind(property:".";transform:126)/>
                                //<usertileview SizeId=1 tooltip=true Accessible=true AccRole=40 UserTileStyle=CacheOnly Active=Inactive Email=bind(property:".";transform:127;default:" ") IsBuddy=bind(property:".";transform:126)/>
                                //<usertileview SizeId=large tooltip=true Accessible=true AccRole=40 UserTileStyle=CacheOnly Active=Inactive Email=bind(property:".";transform:127;default:" ") IsBuddy=bind(property:".";transform:126)/>
                                <usertileview SizeId=0 tooltip=true Accessible=true AccRole=40 UserTileStyle=CacheOnly Active=Inactive Email=bind(property:".";transform:127;default:" ") IsBuddy=bind(property:".";transform:126)/>                                   
                            </element>
                            //<element id=atom(idUserTileBorder2)/>
                            //<element id=atom(idUserTileBorder) class="Small"/>
                            //<element id=atom(idUserTileBorder) class="Medium"/>                           
                            <element id=atom(idUserTileBorder)  class="Full"/>                           
                        </element>
                    </element>
                </CmdButton>
               
            </Element>
        </Element>
        <Element Layoutpos=left Layout=flowlayout(0,2,2,2)>
            <Element LayoutPos=top Layout=BorderLayout() Padding=Rect(4,2,4,0)>           
               
                    <Element id=atom(statuspill) LayoutPos=Top ContentAlign=MiddleCenter ContentIndex=bind(property:".";transform:125) AccDesc=bind(property:"Name")/>
                   
           
                <Element LayoutPos=none id=atom(itemgleamcont) Layout=VerticalFlowLayout(0,2,2,2)>
                    <Gleam padding=rect(0,0,0,0) id=atom(gleam) StoreId=bind(property:"Id";default:0) GleamState=bind(property:"GleamState";default:0) Class=bind(property:"GleamState";transform:117;default:"HideGleam") Active=Inactive/>
                </Element>
       
            </Element>
        </element>

           
            <Element LayoutPos=Top Layout=VerticalFlowLayout(0,0,0,2)>
                <Element Layout=BorderLayout()>
                    <LabelRichEdit id=atom(ContactName) Class="ContactName" foreground=rcclr(59530) Content=bind(property:"Name") ShowEmoticons=true Active=Inactive FontStyle=bind(property:"IsSmtp";transform:158)/>
                   
                    //<element layout=flowlayout(0,2,0,2) padding=rect(3,0,0,2)>
                    //    <Element Content="(" foreground=rcclr(59530)/>
                    //    <Element id=atom(ContactStatus) Content=bind(property:".";transform:123) foreground=rcclr(59530)/>
                    //    <Element Content=")" foreground=rcclr(59530)/>
                    //</element>
           
                </Element>
            </Element>
           
            <Element LayoutPos=Top Class="ExpandedRow2" Layout=VerticalFlowLayout(0,0,0,2) Visible=bind(property:choose("StatusMessage","CurrentMedia");default:false)>
                <PSMElement id=atom(idPSMelem) Email=bind(property:".";transform:127) StatusMessage=bind(property:"StatusMessage") MusicInfo=bind(property:"CurrentMedia") Layout=BorderLayout()>
                    <Element id=atom(idPSM) Layout=VerticalFlowLayout(0,2,3,2)>
                        <EmoticonText id=atom(idPSMText) Active=inactive Accessible=false Tooltip=true AccState=64/>
                    </Element>
                    <Element id=atom(idCurrentSong) Layout=BorderLayout() Visible=False>
                        <Element id=atom(idSongIcon) Active=Inactive/>
                        <UrlElem id=atom(idSongText) Layout=VerticalFlowLayout(0,2,0,2) class="PSMUrl" CmdID=2339 ShowAmpersand=False>
                            <WLEdit id=atom(idSongInnerText) active=inactive/>
                        </UrlElem>
                    </Element>
                </PSMElement>
            </Element>
            <Element LayoutPos=Top Class="ExpandedRow3" Layout=VerticalFlowLayout(0,0,0,2)>
                <Element contentalign=middleleft|endellipsis foreground=rcclr(59533) id=atom(idEMailelem) Content=bind(property:".";transform:194;default:" ") Visible=bind(property:".";transform:154)/>
            </Element>
   
    </Element>
</MsgrContactElement>

---

Basicly, the whole definition (1004) without the option tags.

The problem:

I used to have this listitem setup (this is 1 listitem, 1 contact):

----------- [empty space]
|............| Nickname
|............| Personal Message
|............| Email
----------- [empty space]

As you can see, the Nickname, Personal Message and Email ExpandedRow's are centered in the vertical direction next to the display picture, in Detailed Contact List mode.

For some odd reason, when I tweak the layout's, I end up having the nick, psm and email on 1 line, still not centered in the vertical direction, on top of the listitem.

a wrong setup:

----------- Nickname Personal Message Email
|............|
|............|
|............|
-----------

[Note: This is not how it looks like now. The code provided is the default, stripped code of Open Live.]


Am I looking in the wrong file, or was I doing something wrong? How would I be able to set the expanded rows next to the dp, as in the first 'picture'?