Xpages dojo listTextBox vertical stack? - arraylist

Question

How do I stack items in a djListTextBox field to line up vertically instead of horizontally? They don't even break cleanly between values when it comes to the boundaries of the cell or panel .
I saw a solution HERE, but this solution claims that values displayed in djextListTextBox are surrounded by span and a tags, and therefore I can put some css on it (e.g. "verticalStack"), but the html I get is this without any span tags around each item:
<input type="text" dojoType="extlib.dijit.ListTextBox" msep="^^"
class="verticalStack" id="view:_id1:_id2:OneUIMainAreaCallback:NAICSCodes"
name="view:_id1:_id2:OneUIMainAreaCallback:NCodes" value="Oilseed^^Apple
Orchards^^Synthetic Dye">

Answer 1

This solution works for OneUI themes on 9.0.1:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.beforePageLoad><![CDATA[#{javascript:
sessionScope.test = ["aaa", "bbb", "ccc"]
}]]></xp:this.beforePageLoad>
<xp:this.resources>
<xp:styleSheet
href="/yourCssFile.css"></xp:styleSheet>
</xp:this.resources>
<xe:djextListTextBox
id="djextListTextBox1"
value="#{sessionScope.test}">
</xe:djextListTextBox>
</xp:view>
with CSS file
.lotusInlineList span {
display: block;
margin-left: 0px !important;
}
.lotusInlineList a span {
display: inline;
}